Pu sh элементов в массив не работает в сценарии типа

Question

Я использую таблицу, используя MatTableModule в angular, используя typescripts.

Работает нормально, когда я присваиваю значение datasource следующим образом:

let dataRow = {name: dealerInfo.name, address: dealerInfo.address, town: dealerInfo.town, contact:dealerInfo.contact};
this.dataSource = [dataRow];

Поскольку мне нужно динамически добавлять строки, я использовал pu sh () следующим образом (но это не работает, он не показывает данные в html),

let dataRow = {name: dealerInfo.name, address: dealerInfo.address, town: dealerInfo.town, contact:dealerInfo.contact};
this.dataSource.push(dataRow);

Так определил мой источник данных.

dataSource: any [] = [];

Каким должен быть правильный способ добавление элементов динамически?

Answer 1

Правильный способ создания MatTableDatasource - создать его экземпляр, который вы передаете как [dataSource] свойство

dataSource: MatTableDataSource<any> = new MatTableDataSource<any>();

Вы можете передавать начальные данные в конструкторе. Затем вы добавляете sh к его data свойству

this.dataSource.data.push(dealerInfo);

Поскольку вы копируете свойства 1: 1 по имени, нет необходимости сначала создавать промежуточные объекты.

Кроме того, создайте интерфейс вместо использования any

export interface TableRow {
    name: string;
    ...
}

и

new MatTableDataSource<TableRow>();

Документация :

DataSource

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

Answer 2

При поддержке ответа @ baao я решил проблему следующим образом:

  // Defined variables.
  rowDataArr: RowData[] = [];
  dataSource: MatTableDataSource<RowData> = new MatTableDataSource<RowData>();

И как только я получил данные от внутреннего сервера.

valuesFromBackEnd.forEach(rowData=> {
          this.rowDataArr.push(rowData);
        });
        this.dataSource.data = this.rowDataArr;