javascript - 更改 ngFor 列表更改的特定元素

Question

我有这个 HTML 用于显示用户列表:

      <div *ngFor="let item of users " [ngClass]="{'highlight': item.isDeleted }"
        class="d-flex selected-list-items mt-3">
        <div class="col-md-5 col-lg-5 col-xs-5 col-sm-5 col-xl-5">
            <label>{{item.displayName}}</label>
        </div>
        <div class="col-md-5 col-lg-5 col-xs-5 col-sm-5 col-xl-5">
            <label> {{ getEnumTranslate(item.title)}}</label>
        </div>
        <div class="justify-content-center col-md-2 col-lg-2 col-xs-2 col-sm-2 col-xl-2">
            <button (click)="deleteUser(item.userId)" mat-button>
                <mat-icon aria-label="Delete" color="accent">delete</mat-icon>
            </button>
        </div>
    </div>

我使用私有(private)传输:BehavorSubject，创建一个验证来执行此操作:

当传输发生变化时必须执行此代码:

this.transport.listValue$.subscribe(data => {
        if (data != null) {
            data.forEach(element => {
                let user = this.users.find(x => x.userId = element);
                if (user != null) {
                    user.isDeleted = true;
                }
            });
        }
    });

并在html中更改此代码中查找用户的背景颜色let user = this.users.find(x => x.userId = element); .

现在我的问题在这里:

当 transport 发生变化时，它会运行更改背景的代码并找到该用户，但它只是更改此 HTML 代码中第一个元素的背景，
第三个元素中的特定用户，但它发生了变化第一个元素 如果需要更改 HTML 中的第三个元素。

如何解决这个问题？

Answer 1

我已经更新了适合您的场景的代码。在这里，我改变了 users 数组中的实际数据。请检查并告知我是否可以解决您的问题。

this.transport.listValue$.subscribe(data => {
  if(data != null) {
    for (const user of this.users) {
      if(data.includes(user.userId)) {
        user.isDeleted = true
      }
    }
  }
});