2

我遇到了一些问题。我在 Angular 6 中有一个组件，其中正在生成多个带有数据的 Mat-Tables。我在 div 标签中使用 ng-for 循环来遍历所有 Mat-Table 数据源。后来我试图在表中添加一个新行。到这里为止都很好，但是我无法获取单击此添加行功能的表的实例。在 .ts fenter 代码中，在 View-Child 的帮助下，我总是只获得第一个表的实例。我想获取所有表的实例，我将使用它调用渲染行函数来刷新视图中选定的 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 */
4

4 回答 4

3

我有一个类似的问题，并通过使用 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();

first 和 last 是 queryList 的属性。 https://angular.io/api/core/QueryList#properties

确保您正在导入 MatTable

import { MatTable } from "@angular/material/table";
于 2019-05-07T13:01:58.673 回答
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...
  }

编辑：

如果你想刷新你的数据源

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

您可以只传递新数组（带有新引用），它将触发数据更改并且您的数据表将刷新

如果您希望使用 for 为每个表创建一个统一 ID，

于 2019-03-17T17:52:05.073 回答
0

扩展 Chishty 的答案，如果是“n”张桌子，您可以使用@ViewChildren循环来调用renderRows()每张桌子。总体步骤如下 -

  1. 进口mat-table

    从“@angular/material/table”导入 { MatTable }；

  2. 声明@ViewChildren_QueryList

    @ViewChildren(MatTable) csvTable !: QueryList<MatTable>;

  3. 调用renderRows添加或删除操作

    this.csvTable.toArray().forEach(data => data.renderRows());

  4. 请记住在模板中使用与 table-id 相同的变量

    <mat-table #csvTable [dataSource]="csvForm.value">

更多关于@ViewChildren- Angular 文档
更多关于QueryList- Angular 文档

于 2020-10-07T05:12:54.087 回答
0

在 html 中：

<table
mat-table
id="table"
class="full-width"
[dataSource]="dataSource"
matSort
data-cy="pg_table"
(matSortChange)="onSortData($event)"
#table1
>

在模板中：

@ViewChild('table1', { static: true }) table1: MatTable<any>;
于 2020-01-03T12:18:25.843 回答