在 Angular 中使用异步管道设置选择元素的选定项目

角度专家！我试图理解 Angular 中的异步管道，但我陷入了一个基本场景。我在用户界面中有两个选择元素，一个包含帖子，一个包含相关评论。我想将一个帖子（最后一个）设置为显示帖子的选择元素的最初选择的帖子，并且我想使用所选项目来过滤第二个选择中的相关评论。这在我的代码中不起作用，我在 Stackblitz 中创建了一个简化版本：

https://stackblitz.com/edit/angular-p6ynuy https://stackblitz.com/edit/angular-p6ynuy

你们中的任何人都可以向我解释我做错了什么吗？这是相关的代码片段和 HTML：

ngOnInit() {
    this.postList$ = this.getPostList();

    // latestPost$ is not is use yet, but maybe it could be used to set the selected post?
    this.latestPost$ = this.postList$ 
      .pipe(
        map(posts => posts[posts.length - 1])
      );

    this.selectedPost$ = combineLatest([
      this.postList$,
      this.postSelectedAction$
    ])
      .pipe(
        map(([posts, selectedPostId]) => posts.find(post => post.id === selectedPostId))
      );

    this.commentList$ = this.selectedPost$
      .pipe(switchMap(
        post => this.getCommentList(post)
      ));
  }


<select [ngModel]="selectedPost$ | async" (change)="onSelected($event.target.value)">
  <option *ngFor="let post of postList$ | async" [ngValue]="post">
    {{post.id}} {{post.title}}
  </option>
</select>
<select>
  <option *ngFor="let comment of commentList$ | async" [ngValue]="comment">
    {{comment.id}} {{comment.postId}} {{comment.name}}
  </option>
</select>

Angular 默认通过引用比较对象

你快到了。问题是你的select得到一个列表options 引用Posts 作为一部分ngFor。现在要找出哪个option当前已选择，Angular 会比较每个post当前值为的对象selectedPost$ | async.

默认情况下，完成的方法是使用===操作员。这===运算符按值比较基元，但按引用比较对象。例子：

console.log('a' === 'a');
const obj = {'a': 'b'};
const obj2 = obj;
console.log(obj === obj2);
console.log(obj === {'a': 'b'});

所以为了post算作同一个帖子selectedPost$ | async，它们必须是实际相同的对象，而不仅仅是看起来相同的对象。

您实际上检索同一帖子的多个副本，而不仅仅是一个帖子

现在情况并非如此：当您使用async管道，在更改检测期间，可能会发生从 API 重新加载帖子的情况。当您查看浏览器的网络选项卡时，您实际上可以看到有三个请求：

所有请求的响应负载都是相同的，但是Post对象被返回三次，它们被存储在内存中三次。 JavaScript 无法知道它们实际上是相同的，并且===比较回报false.

解决方案：提供您自己的解决方案compareWith功能

你怎么解决这个问题？你可以帮忙Angular比较一下Post正确地在你的对象select。你只需要问自己这个问题：我怎么知道两个Post对象实际上是同一个对象？在这种情况下，答案是：当它们具有相同的 ID 时。

现在，您可以为 Angular 编写自己的指令来比较对象或您的选择：只需添加一个compareWith输入到选择：

<select [ngModel]="selectedPost$ | async" 
(change)="onSelected($event.target.value)"
[compareWith]="comparePosts"
>

现在 Angular 知道使用一种名为comparePosts比较两个帖子。现在这个方法看起来怎么样？例如这样：

comparePosts(p1: Post, p2: Post) {
    return p1.id === p2.id;
}

现在 Angular 知道如何正确比较两个Post对象，你的问题就解决了。

PS：请务必写一个更好的comparePosts方法比我做的好，例如也处理得当undefined and null values.