angular - matTable: データソース行を変更した後、UI が更新されない

Question

ユーザーが編集されたときに dataTable を更新しようとしています。

現時点では、dataSource が更新されていますが、変更は前面に表示されません。つまり、私のconsole.log(this.dataSource)ショーは良いデータです。しかし、ウェブページではそうではありません。

dataSource (ngOnInit) を取得する方法は次のとおりです。

this.users.users().subscribe(data => {
    this.dataSource.data = data;
});

これが私のupdate機能です：

/**
* Update an user
* @param user The user to update
*/
  update(user: User) {
    // users = user's services
    this.users.edit(user)
    .subscribe(
      userEdited => {
        const userIndex = this.dataSource.data.findIndex(usr => usr.id === user.id);

        console.log('Before change :', this.dataSource.data[userIndex], userIndex);

        this.dataSource.data[userIndex] = userEdited;

        console.log('After change :', this.dataSource.data[userIndex], this.dataSource.data);
      }
    );
  }

解決

関数を呼び出す必要がありrenderRows()ます。

だから私は私のテーブルに次のような参照を追加しました:<table mat-table #table [dataSource]="dataSource">

@ViewChild次に、次のようなプロパティを宣言します@ViewChild('table', { static: true }) table: MatTable<any>;

それで ：

 const userIndex = this.dataSource.data.findIndex(usr => usr.id === user.id);
 console.log('Before change :', this.dataSource.data[userIndex], userIndex);
 this.dataSource.data[userIndex] = userEdited;

 this.table.renderRows(); // <--- Add this line

 console.log('After change :', this.dataSource.data[userIndex], this.dataSource.data);