matTable: пользовательский интерфейс не обновляется после изменения строки источника данных

Я пытаюсь обновить свою таблицу данных, когда пользователь был отредактирован.

На данный момент источник данных обновлен, но на лицевой части изменений не видно. Я имею в виду, мои console.log(this.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);

angular angular-material angular-material-table
person Emilien    schedule 13.08.2019    source источник
comment
вам может потребоваться вызвать функцию renderRows(), см. material.angular.io/components/table/ API   -  person Nitsan Baleli    schedule 13.08.2019
comment
Можете ли вы показать, как вы решили отображать свои данные в файле html?   -  person Thanos Soulis    schedule 13.08.2019
comment
@NitsanBaleli Спасибо, ты прав! Я не знал этого метода раньше!   -  person Emilien    schedule 13.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

вам может понадобиться вызвать функцию renderRows(), см. https://material.angular.io/components/table/api

Если источником данных таблицы является DataSource или Observable, он будет вызываться автоматически каждый раз, когда предоставленный поток Observable создает новый массив данных. В противном случае, если ваши данные представляют собой массив, эту функцию нужно будет вызывать для отображения любых изменений.

/**
* Update an user
* @param user The user to update
*/
update(user: User) {
  this.users.edit(user)
  .subscribe(
    userEdited => {
      const userIndex = this.dataSource.data.findIndex(usr => usr.id === user.id);
      this.dataSource.data[userIndex] = userEdited;
      this.table.renderRows(); // <--- Add this line
    }
  );
}
person Nitsan Baleli    schedule 13.08.2019