如何将数据动态传递给物料表数据源
[英] How to pass data to material table data source dynamically
本文介绍了如何将数据动态传递给物料表数据源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将动态数据传递给材料表.我显示我的代码:
parent.component.html
<div class="vehicle-img"><img src={{vehicleImg}}/>
<div class="board"><div class="board-column company-overview"><div class="board-column-header">{{ "COMPANY_OVERVIEW.TITLE" |翻译}}
<div class="board-column-content"><app-company-overview [companyOverviewData]="companyOverviewData"></app-company-overview><div *ngIf="!companyOverviewData" class="loading"><app-loading></app-loading>
<div class="board-column feeds"><div class="board-column-header">{{ "FEEDS.TITLE" |翻译}}
<div class="board-column-content"><app-feeds [feedsOverviewData ]="feedsOverviewData "></app-feeds><div *ngIf="!feedsData" class="loading"><app-loading></app-loading>
在这个父组件中，它会调用一个API来获取feedsOverviewData
this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {this.feedsOverviewData = 数据；});
并且这个 feedsOverviewData 将被传输到 app-feeds 组件，这个组件还有一个子组件 feeds-list 组件，
<mat-card class="feed-card"><mat-card-title><div class="title"><h3>{{ 'FEEDS.SUBTITLE' |翻译}} </h3><小时>
</mat-card-title><app-feed-list [feedsOverviewData]="feedsOverviewData"></app-feed-list><div class="comment"><textarea class="textarea" matInput placeholder="输入您的评论..." [(ngModel)]="feedsComment"></textarea><button mat-button [disabled]="!feedsComment"><mat-icon class="send-button" matSuffix>send</mat-icon>
</mat-card>
这个 feed-list 组件是用角材料表实现的.
<ng-container matColumnDef="feeds"><td mat-cell *matCellDef="let item"><mat-card-header><div mat-card-avatar><mat-icon class="avatar">insert_emoticon</mat-icon><mat-card-title class="feeds-header"><b><!-- <div *ngIf="item.type === 'searchevent'"><span>n-Level {{item.user}}</span>
--><div *ngIf="item.comment === 'searchevent'"><span>事件</span>
</b></mat-card-title><mat-card-subtitle class="feeds-date">{{item.timestamp |日期:'dd/MM/yyyy'}}</mat-card-subtitle></mat-card-header><mat-card-content><div *ngIf="item.type !== 'searchevent'"><div class="feeds-info">{{item.comment}}</div>
<div *ngIf="item.type === 'searchevent'"><div class="feeds-info">FIN 搜索由 {{item.user}} 执行.</div>
</mat-card-content></td></ng-容器><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr>
和 feed-list.ts 就像这样:
导出类 FeedListComponent 实现 OnInit {displayColumns: string[] = ['feeds'];@Input() feedsOverviewData: Feeds[];@ViewChild(MatPaginator) 分页器:MatPaginator；dataSource = new MatTableDataSource();构造函数(){}ngOnInit() {this.dataSource.paginator = this.paginator;this.dataSource.data = this.feedsOverviewData;}ngOnChange() {console.log(this.feedsOverviewData);this.dataSource.data = this.feedsOverviewData;}}
我尝试了很多方法来将此动态数据传递到表，但它不起作用.
你有什么想法吗?
此致，
狮子座
解决方案
你可以像这样使用它:基于数据的副本创建一个新的 DataSource(为了不变性)
this.dataSource = new MatTableDataSource([...<[任何传入的数据]>);
试试这个(针对你的情况)
this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {this.feedsOverviewData = [...数据];});
(ngOnInit 的类似设置)
ngOnChange() {console.log(this.feedsOverviewData);this.dataSource = new MatTableDataSource(this.feedsOverviewData);}
订阅在其自己的异步进程中工作，数据仅在那里可用.angular 在幕后做了一些事情来完成这项工作.
<app-feed-list [feedsOverviewData]="this.feedsOverviewData"></app-feed-list>
I want to pass the dynamic data to material table. I show my code:
parent.component.html
<div class="overview">
<div class="vehicle-img">
<img src={{vehicleImg}} />
</div>
<div class="board">
<div class="board-column company-overview">
<div class="board-column-header">{{ "COMPANY_OVERVIEW.TITLE" | translate}}</div>
<div class="board-column-content">
<app-company-overview [companyOverviewData]="companyOverviewData"></app-company-overview>
<div *ngIf="!companyOverviewData" class="loading">
<app-loading></app-loading>
</div>
</div>
</div>
<div class="board-column feeds">
<div class="board-column-header">{{ "FEEDS.TITLE" | translate}}</div>
<div class="board-column-content">
<app-feeds [feedsOverviewData ]="feedsOverviewData "></app-feeds>
<div *ngIf="!feedsData" class="loading">
<app-loading></app-loading>
</div>
</div>
</div>
</div>
in this parent component, it will call a API to get feedsOverviewData
this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {
this.feedsOverviewData = data;
});
and this feedsOverviewData will be transport to app-feeds component, this component has also a child component feeds-list component,
<div class="feeds">
<mat-card class="feed-card">
<mat-card-title>
<div class="title">
<h3>{{ 'FEEDS.SUBTITLE' | translate}} </h3>
<hr>
</div>
</mat-card-title>
<app-feed-list [feedsOverviewData]="feedsOverviewData"></app-feed-list>
<div class="comment">
<textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
<button mat-button [disabled]="!feedsComment">
<mat-icon class="send-button" matSuffix>send</mat-icon>
</button>
</div>
</mat-card>
</div>
this feed-list component is implemented with angluar material table.
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="feeds">
<td mat-cell *matCellDef="let item">
<mat-card-header>
<div mat-card-avatar>
<mat-icon class="avatar">insert_emoticon</mat-icon>
</div>
<mat-card-title class="feeds-header"><b>
<!-- <div *ngIf="item.type === 'searchevent'">
<span>n-Level {{item.user}}</span>
</div> -->
<div *ngIf="item.comment === 'searchevent'">
<span>Event</span>
</div>
</b>
</mat-card-title>
<mat-card-subtitle class="feeds-date">{{item.timestamp | date: 'dd/MM/yyyy'}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div *ngIf="item.type !== 'searchevent'">
<div class="feeds-info">{{item.comment}}</div>
</div>
<div *ngIf="item.type === 'searchevent'">
<div class="feeds-info">FIN search executed by {{item.user}}.</div>
</div>
</mat-card-content>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
and feed-list.ts is just like this:
export class FeedListComponent implements OnInit {
displayedColumns: string[] = ['feeds'];
@Input() feedsOverviewData: Feeds[];
@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource = new MatTableDataSource<any>();
constructor() {
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.data = this.feedsOverviewData;
}
ngOnChange() {
console.log(this.feedsOverviewData);
this.dataSource.data = this.feedsOverviewData;
}
}
I have tried many ways to pass this dynamica data to table, but it was not working.
do you have any ideas?
Best Regards,
Leo
解决方案
you can use it like this: create a new DataSource based on a copy of the data (for immutability)
this.dataSource = new MatTableDataSource([...<[whatever incoming data]>);
try this (for your case)
this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {
this.feedsOverviewData = [...data];
});
(similar setup for ngOnInit)
ngOnChange() {
console.log(this.feedsOverviewData);
this.dataSource = new MatTableDataSource(this.feedsOverviewData);
}
the subscribe works in its own async process with the data only available there. angular does some things behind the scenes to make this work.
<app-feed-list [feedsOverviewData]="this.feedsOverviewData"></app-feed-list>
这篇关于如何将数据动态传递给物料表数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
