Вызов renderRows() на таблице угловых материалов

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

Документы говорят, что "вы можете инициировать обновление строк, отображаемых в таблице, вызывая метод renderRows()". но он не похож на обычный дочерний компонент, где я могу использовать что-то "сортировка @ViewChild (MatSort): MatSort;" потому что я не импортирую его.

Если я импортирую его и попробую что-то вроде @ViewChild ('myTable') myTable: MatTableModule; то я получаю сообщение об ошибке, которое говорит, что renderRows() не существует в этом типе.

Как я могу назвать этот метод? Спасибо!

Мой фрагмент кода таблицы:

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">

Ответ 1

Убедитесь, что вы импортируете ViewChild и MatTable:

import {Component, ViewChild} from '@angular/core';
import {MatTable} from '@angular/material';

Затем вы можете получить ссылку на таблицу с помощью ViewChild (обратите внимание, что тип T требуется на MatTable - я просто использовал любой, но если у вас есть типизированная таблица, вам нужно будет использовать этот тип:

@ViewChild(MatTable) table: MatTable<any>;

Затем, когда вы каким-либо образом модифицируете таблицу, вам нужно будет вызвать метод renderRows().

delete(row: any): void {
  /* delete logic here */
  this.table.renderRows();
}

Вот очень простой рабочий пример: https://stackblitz.com/edit/angular-bxrahf

Некоторые источники, которые я обнаружил при решении этой проблемы самостоятельно:

Ответ 2

@ViewChild('myTable') myTable: MatTableModule

Вы не должны запрашивать строку. Это запросит ссылку (определенную как <cmp #ref>). Также тип неправильный: вы не захватываете модуль из представления, вы захватываете компонент.

Вы должны импортировать компонент, который хотите запросить, и сделать следующее (изменить в зависимости от того, какой компонент вам нужно выполнить):

@ViewChild(MatTable) matTable: MatTable

Аргумент в ViewChild декораторе является компонентом вы хотите запросить и тип только для вашего удобства - вы можете опустить его или сказать any, но у вас не будет никакой помощи от машинописи, если вы не сделаете это так, рекомендуется оставить его.

Ответ 3

В случае использования changeDetection OnPush это затруднит перезагрузку.

Ответ 4

Может сэкономить время при отладке:

В моем случае matTable не был определен, потому что * ngIf в содержащем div приводит к false при модуле init.