有一個主題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));
}
我需要過濾所有選中的用戶。
怎么說流那個物件被改變了？
uj5u.com熱心網友回復：
您正在設定從 發出的值的屬性user$，這不會更新流本身。
要更新流，您需要將更新發送到持有主題的組件/服務，一個簡化的示例如下所示：
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);
}
}
對您來說，這可能意味著您的服務必須有一種方法來更新用戶，我在這里盡量保持簡單以說明這一點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/345438.html