首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如果组件中有多个表,如何获取Mat-Table的实例

如果组件中有多个表,如何获取Mat-Table的实例
EN

Stack Overflow用户
提问于 2019-03-18 01:44:21
回答 3查看 5.3K关注 0票数 2

我遇到了一些问题。我在Angular 6中有一个组件,在那里我用数据生成了多个Mat-Table。我在div标记中使用ng-for循环来遍历所有Mat-Table数据源。稍后,我尝试向表中添加新行。到这里为止,一切都很好,但是我不能获得这个Add Row函数所针对的表的实例。在.ts fenter代码中,在View-Child的帮助下,我总是只获取第一个表的实例。我想要获取所有表的实例,使用它我将调用render rows函数来刷新视图中选定的MatTable

粘贴视图和TS文件的示例代码。注意: Add现在不起作用。

代码语言:javascript
复制
   <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 */
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55210035

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档