我正在使用Angular材质数据表和数组作为数据源。我会使用文档中提到的renderRows()方法更新我的表每次数据更改。
我有 ts文件
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { AjouttextService } from '../ajouttext.service';
import { DataSource } from "@angular/cdk/collections";
import { Observable } from "rxjs/Observable";
import { nomchamp } from '../model';
@Component({
selector: 'app-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {
constructor(private dataService: AjouttextService) { }
data: nomchamp[] = [{ id: "33", text: "HAHA" }, { id: "55", text: "bzlblz" }];
displayedColumns = ['text'];
dataSource = new MatTableDataSource(this.data);
//new UserDataSource(this.dataService);
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
}
ngOnInit() {
}
ajoutText(newtext: string, table: any) { \\ADD TEXT
let noew: nomchamp = { id: "44", text: newtext };
this.data.push(new);
table.renderRows();
}
}
有 HTML文件,我在其中声明了#table变量并将其传递给ajoutText
函数
<form class="form">
<mat-form-field class="textinput">
<input #newtext matInput placeholder="Ajoutez votre texte" value="">
</mat-form-field>
<button type="button" mat-raised-button color="primary" (click)="ajoutText(newtext.value,table)">Ajouter</button>
</form>
<p>{{text}}</p>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="text">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.text}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
当我在输入中添加文本并单击按钮时,我收到此错误
ERROR TypeError: table.renderRows is not a function
答案 0 :(得分:4)
我使用ViewChild使其正常工作。
首先,您必须导入它:
import { ViewChild } from '@angular/core';
然后紧接着
export class DatatableComponent implements OnInit {
您声明:
@ViewChild(MatTable) table: MatTable<any>;
现在您可以访问它,它应该具有renderRows
方法。
答案 1 :(得分:2)
好像您需要将@angular-cdk
包更新为5.2。
检查源代码后,仅在该版本中添加了renderRows
:
5.1 version of CdkTable source code - &gt;不包含renderRows
方法。
5.2 version of CdkTable source code - &gt;包含renderRows
方法。
(请注意,MatTable
扩展了CdkTable
。)