![renderRows]( "renderRows")
本文介绍了类型错误:table.renderRows 不是函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用带有数组的 Angular 材质数据表作为数据源.我会使用文档中提到的 renderRows() 方法更新我的表格，每次数据更改.
我有我的 ts 文件
import { Component, OnInit } from '@angular/core';从 '@angular/material' 导入 { MatTableDataSource };从'../ajouttext.service'导入{AjouttextService}；从@angular/cdk/collections"导入{数据源}；import { Observable } from "rxjs/Observable";从'../model'导入{nomchamp}；@成分({选择器:'应用程序数据表'，templateUrl: './datatable.component.html',styleUrls: ['./datatable.component.css']})导出类 DatatableComponent 实现 OnInit {构造函数(私有数据服务:AjouttextService){}数据:nomchamp[] = [{ id: "33", text: "HAHA" }, { id: "55", text: "bzlblz" }];displayColumns = ['text'];数据源 = 新的 MatTableDataSource(this.data);//新用户数据源(this.dataService);应用过滤器(过滤器值:字符串){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配}ngOnInit() {}ajoutText(newtext: string, table: any) { \\ADD TEXT让 noew: nomchamp = { id: "44", text: newtext };this.data.push(new);table.renderRows();}}
有HTML 文件，我在其中声明#table 变量并将其传递到ajoutText 函数
<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></表单><p>{{text}}</p><div class="example-container mat-elevation-z8"><mat-table #table [dataSource]="dataSource"><!-- 位置列--><ng-container matColumnDef="text"><mat-header-cell *matHeaderCellDef>号</mat-header-cell><mat-cell *matCellDef="let element">{{element.text}} </mat-cell></ng-容器><mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table>
当我在输入中添加文本并单击按钮时出现此错误
ERROR TypeError: table.renderRows 不是函数
解决方案
看来你需要更新你的 @angular-cdk 打包到 5.2.
查看源代码后，renderRows 只是从那个版本开始添加的:
5.1 版 CdkTable 源码 -> 不包含 renderRows 方法.
5.2 版 CdkTable 源码code -> 包含一个 renderRows 方法.
(注意MatTable 扩展了CdkTable.)
I'm using Angular material datatable with array as datasource. I would update my table every data change using renderRows() method as mentionned in the doc.
I have my ts file
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();
}
}
There HTML file where I declare #table variable and pass it in ajoutText function
<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>
When I add text in input and click the button I get this error
ERROR TypeError: table.renderRows is not a function
解决方案
Seems like you need to update your @angular-cdk package to 5.2.
After checking the source code, renderRows was only added since that version:
5.1 version of CdkTable source code -> does not contain a renderRows method.
5.2 version of CdkTable source code -> contains a renderRows method.
(Note that MatTable extends CdkTable.)
这篇关于类型错误:table.renderRows 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！