为什么流不发出变化？

Question

有一个主题users$，通过异步显示在模板中

为什么，当我切换复选框并更改 user.checked - 订阅中未显示数据 console.log()

<div *ngFor="let user of users$ | async">
     <mat-checkbox [(ngModel)] = "user.checked"></mat-checkbox>
</div>


public users$: Observable<User[]>;
this.users$ = this.securityService.users$; // users$ in service it is behSubject
        this.checkedUsersId$ = this.users$.pipe(map((users) => users.filter((user) => user.checked).map((u) => u.id)));
        this.checkedUsersId$.subscribe((e) => console.log(e));
    }

我需要过滤所有选中的用户。

如何说到流对象已更改？

Answer 1

您正在设置来自 user$ 的发射值的属性，这不会更新流本身。

要更新流，您需要将更新发送到持有主题的 component/service，一个简化的示例如下所示：

import { Component, VERSION } from '@angular/core';
import { BehaviorSubject, Subject, Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let user of users$ | async">
      Checked: {{user.checked}}
      <mat-checkbox [ngModel]="user.checked" (ngModelChange)="updateUser(user.id, !user.checked)"></mat-checkbox>
    </div>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  private users = [{ id: 1, checked: false }];

  public userSubject: Subject<{ id: number; checked: boolean }[]> =
    new BehaviorSubject(this.users);
  public users$: Observable<{ id: number; checked: boolean }[]> =
    this.userSubject.asObservable();

  public updateUser(id: number, checked: boolean) {
    this.users = this.users.map((user) =>
      user.id === id ? { ...user, checked } : user
    );
    // Send update to stream.
    this.userSubject.next(this.users);
  }
}

对您来说，这可能意味着您的服务必须有一种更新用户的方法，我在这里尽量保持简单以说明这一点。

为什么流不发出变化？

Why stream is not emitting changes?

rxjs

angular