angular - 需要对 mat-table 中的每一行重新分配数据、分页器和排序
问题描述
我<mat-table>
已经实现了一个addRow()
函数,该函数使用一组基于数据类型的默认值在表中创建一个新行。
我遇到的问题是每次创建新行时,我都需要重新分配MatTableDataSource
、MatPaginator
和MatSort
. 如果我不执行重新分配,则不会显示新数据,或者分页/排序不起作用。
所有这些重新分配似乎都昂贵且迂回,尤其是在较大的数据集上,但我不完全确定如何做得更好。
动态表.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { TableField } from 'src/app/models/table-field';
const fields: TableField[] = [
{ name: "job", type: "string", editType: "free", options: [] },
{ name: "wage", type: "string", editType: "free", options: [] },
{ name: "state", type: "string", editType: "spinner", options: ["MI", "CA", "TX"] },
{ name: "isUnion", type: "boolean", editType: "checkbox", options: [] }
];
const rows: any[] = [
{ job: "J1", wage: "10.00", state: "MI", isUnion: false },
{ job: "J2", wage: "15.00", state: "TX", isUnion: true },
{ job: "J3", wage: "77.00", state: "CA", isUnion: true }
];
@Component({
selector: 'app-dynamic-table',
templateUrl: './dynamic-table.component.html',
styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
Fields: {}[];
Rows: {}[];
ColumnHeaders: string[];
dataSource: MatTableDataSource<{}>;
constructor() { }
ngOnInit() {
this.Fields = fields.map(field => field);
this.ColumnHeaders = this.Fields.map(field => field["name"]);
this.Rows = rows.map(row => row);
console.log(this.Fields);
console.log(this.Rows);
console.log(this.ColumnHeaders);
this.dataSource = new MatTableDataSource(rows);
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
addRow() {
let row = {};
fields.forEach(field => {
switch(field.editType) {
case "free": {
row[field.name] = "default"
break;
}
case "spinner": {
row[field.name] = field.options[0];
break;
}
case "checkbox": {
row[field.name] = false;
break;
}
}
});
this.Rows = this.Rows.concat(row);
this.dataSource = new MatTableDataSource(this.Rows);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
printRows() {
console.log(this.dataSource.data)
}
}
动态表.component.html
<table mat-table [dataSource]="dataSource" matSort>
<ng-container *ngFor="let field of Fields" matColumnDef="{{field.name}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{field.name}}</th>
<td mat-cell *matCellDef="let row">
<input *ngIf="field.editType == 'free'" matInput [(ngModel)]="row[field.name]" placeholder="{{row[field.name]}}" required>
<mat-select *ngIf="field.editType == 'spinner'" [(ngModel)]="row[field.name]">
<mat-option *ngFor="let option of field.options" [value]="option">{{option}}</mat-option>
</mat-select>
<mat-checkbox *ngIf="field.editType == 'checkbox'" [(ngModel)]="row[field.name]">
</mat-checkbox>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="ColumnHeaders"></tr>x
<tr mat-row *matRowDef="let row; columns: ColumnHeaders;"></tr>
</table>
<mat-paginator #paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
<button mat-button color="primary" (click)="addRow()">Add Row</button>
<button mat-button color="primary" (click)="printRows()">Print Rows</button>
解决方案
您可以使用 setter 进行分页和排序组件
@ViewChild(MatPaginator, { static: false })
set paginator(value: MatPaginator) {
if(this.dataSource) {
this.dataSource.paginator = value;
}
}
@ViewChild(MatSort, { static: false })
set sort(value: MatSort) {
if(this.dataSource) {
this.dataSource.sort = value;
}
}
您可以在此处删除分配:
ngAfterViewInit() {
//this.dataSource.paginator = this.paginator;
//this.dataSource.sort = this.sort;
}
要修改表,您别无选择,只能重新分配数据源。当您将添加新行时,只需修改数据源。感谢设置器,分页器和排序组件将被更新。
addRow() {
let row = {};
fields.forEach(field => {
switch(field.editType) {
case "free": {
row[field.name] = "default"
break;
}
case "spinner": {
row[field.name] = field.options[0];
break;
}
case "checkbox": {
row[field.name] = false;
break;
}
}
});
this.Rows = this.Rows.concat(row);
this.dataSource.data = this.Rows;
}
推荐阅读
- java - 如何在java中的子类中定义抽象类的参数化构造函数
- ruby-on-rails - 添加 rails-erb-loader 会破坏 webpacker
- python-3.x - python - 如何在python中将用户输入整数分隔成间隔数字?
- flutter - Flutter 为什么我的小部件条件检查不起作用
- c - 将数组作为参数传递,其大小在括号内
- laravel - Laravel - How to extract one field for items in a model to an array?
- mongodb - 真正缓慢的 MongoDB 查询背后的原因可能是什么?
- javascript - 打字时增加输入高度
- c++ - const 引用传递的参数的可变左值引用
- android - Android Studio:清单合并失败并出现多个错误