我想将动态数据传递到物料表。我显示我的代码:
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>
在此父组件中,它将调用API来获取feedsOverviewData
this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {
this.feedsOverviewData = data;
});
,此feedsOverviewData将被传输到app-feeds组件,该组件还有一个子组件feeds-list组件
<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>
此供稿列表组件是用角度材料表实现的。
<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>
和feed-list.ts就像这样:
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;
}
}
我尝试了许多方法来将Dynamica数据传递到表,但是没有用。
你有什么想法吗?
最好的问候,
狮子座
答案 0 :(得分:0)
您可以这样使用它:基于数据副本创建一个新的数据源(出于不变性)
this.dataSource = new MatTableDataSource([...<[whatever incoming data]>);
尝试一下(针对您的情况)
this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {
this.feedsOverviewData = [...data];
});
(类似于ngOnInit的设置)
ngOnChange() {
console.log(this.feedsOverviewData);
this.dataSource = new MatTableDataSource(this.feedsOverviewData);
}
订阅在其自己的异步过程中工作,仅那里有可用数据。 angular在幕后做了一些事情来使这项工作有效。
<app-feed-list [feedsOverviewData]="this.feedsOverviewData"></app-feed-list>