Как получить экземпляр таблицы Mat, если у нас есть несколько таблиц в компоненте

Question

Я поражен какой-то проблемой.У меня есть компонент в Angular 6, где я генерирую несколько таблиц Mat с данными.Я использую цикл ng-for в теге div, чтобы просмотреть все источники данных Mat-Table.Позже я пытаюсь добавить новую строку в таблицу.До сих пор это нормально, но я не могу получить экземпляр таблицы, для которой нажата эта функция Добавить строку.В .ts fenter code вот с помощью View-Child я всегда получаю только экземпляр 1-й таблицы.Я хотел бы получить экземпляр всей таблицы, с помощью которого я буду вызывать функцию рендеринга строк, чтобы обновить выбранный MatTable в представлении

Вставленный пример кода для представления и файла TS.Примечание Добавить не работает сейчас.

   <div *ngFor="let data of ViewContent">
<button (click)="addElement(event,data?.tableValues,displayedColumns)">Add element</button> <br />
<table   #testTable mat-table [dataSource]="data?.tableValues">

  <!-- Col1 Column -->
  <ng-container matColumnDef="Col1">
    <th mat-header-cell *matHeaderCellDef> Col1 </th>
    <td mat-cell *matCellDef="let element"> {{element.Col1}} </td>
  </ng-container>

  <!-- Col2 Column -->
  <ng-container matColumnDef="Col2">
    <th mat-header-cell *matHeaderCellDef> Col2 </th>
    <td mat-cell *matCellDef="let element"> {{element.Col2}} </td>
  </ng-container>

  <!-- Col3 Column -->
  <ng-container matColumnDef="Col3">
    <th mat-header-cell *matHeaderCellDef> Col3 </th>
    <td mat-cell *matCellDef="let element"> {{element.Col3}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>



<!-- Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

</div>



import {DataSource} from '@angular/cdk/collections';
import {Component,OnInit,ViewChild} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
import  DalContentdata from 'Content.json';
import { MatTable } from '@angular/material';

@Component({
  selector: 'cdk-table-basic-example',
  styleUrls: ['cdk-table-basic-example.css'],
  templateUrl: 'cdk-table-basic-example.html',
})
export class CdkTableBasicExample implements OnInit  {
   ViewContent: Object;
   displayedColumns: string[] = ['Col1','Col2','Col3'];

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

  ngOnInit() {
    this.ViewContent =  [
    {
      "title":"abc",
      "tableValues": [
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        }
      ]
    },
    {
       "title":"abc",
      "displayColumns": "Col1,Col2,Col3",
      "tableValues": [
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        }
      ]
    },
    {
       "title":"abc",
      "displayColumns": "Col1,Col2,Col3",
      "tableValues": [
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        },
        {
          "Col1": "Apple",
          "Col2": "Mango",
          "Col3": "Orange"
        }
      ]
    }
  ];
  }


  addElement(event, title, tableDataSource, displayColumns) {
        console.log('beforeAdd', tableDataSource);
    tableDataSource.push({
      Col1: 'Test',Col2:'Test',Col3:'Test'
    })
     console.log('afteradd', tableDataSource);
     this.table.renderRows();

    console.log('afteradd', tableDataSource);
  }


}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

Answer 1

У меня была похожая проблема, и я решил ее, используя ViewChildren, а не ViewChild.

У меня изначально было:

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

, и для вызова renderRows я звонил

this.table.renderRows();

Однако затем мне понадобилась еще одна таблица в том же компоненте, поэтому мой код изменился на:

@ViewChildren(MatTable) table !: QueryList<MatTable<string>>;

и

this.table.first.renderRows();
this.table.last.renderRows();

С первым и последним свойствамиqueryList.https://angular.io/api/core/QueryList#properties

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

import { MatTable } from "@angular/material/table";

Answer 2

вы должны использовать ViewChild.

html: давайте предположим, что ваши таблицы, работающие внутри цикла for и с индексной переменной с именем i:

  <table id="testTable{{i}}" [dataSource]="yourDataSource"><!--data source can be set from ts as well-->

ts:

@ViewChild('testTable1') matTable1: MatTable<any>;
  @ViewChild('testTable2') matTable2: MatTable<any>;
  @ViewChild('testTable3') matTable3: MatTable<any>;

или, конечно, могутпросто используйте массив.

не забудьте импортировать его, и вы предпочтете использовать ловушку жизненного цикла AfterViewInit

  ngAfterViewInit() {
//    this.matTable...
  }

Edit:

, если вы хотите обновитьваш источник данных

this.matTable.dataSource = [... this.data]

вы можете просто передать новый массив (с новой ссылкой), и он вызовет изменение данных, и вытаблица данных обновится

Если вы хотите создать уникальный идентификатор для каждой таблицы, использующей для,