如何从 forkJoin 中保存值
How to persist value from forkJoin
我有一个场景,我必须获得 2 个 http 调用的结果,并将它们的组合结果数组传递给我正在实例化的 class。这是代码:
export class VideoListComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
dataSource: VideoListDataSource;
constructor( private http: HttpProxyService, private videoService: VideoService ) { }
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['Video Name', 'Author', 'Category Name', 'Highest Quality Format', 'Release Date', 'Options'];
ngOnInit() {
let observables = [this.videoService.getInitialData('movie-authors'), this.videoService.getInitialData('movie-categories')];
forkJoin(observables).subscribe(res => {
this.dataSource = new VideoListDataSource(this.paginator, this.sort, res);
console.log(this.dataSource);
})
}
}
现在在 console.log 上我可以根据需要看到 this.dataSource
中的值,但是在 html 模板上使用它时,它说 this.dataSource 未定义.
有什么帮助吗?我在这里遗漏了什么吗?
使用 HTML 标记进行编辑
<div class="mat-elevation-z8">
<table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
修改您的代码如下:
<div class="mat-elevation-z8">
<table *ngIf="dataSource" mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
</table>
......
</div>
为什么我的代码不起作用:
You are trying to populate table data using datasource which not initialized. datasource gets value from service . Since the view is initialized before service gets called and that time dataSource is undefined, it is throwing the error.
我有一个场景,我必须获得 2 个 http 调用的结果,并将它们的组合结果数组传递给我正在实例化的 class。这是代码:
export class VideoListComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
dataSource: VideoListDataSource;
constructor( private http: HttpProxyService, private videoService: VideoService ) { }
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['Video Name', 'Author', 'Category Name', 'Highest Quality Format', 'Release Date', 'Options'];
ngOnInit() {
let observables = [this.videoService.getInitialData('movie-authors'), this.videoService.getInitialData('movie-categories')];
forkJoin(observables).subscribe(res => {
this.dataSource = new VideoListDataSource(this.paginator, this.sort, res);
console.log(this.dataSource);
})
}
}
现在在 console.log 上我可以根据需要看到 this.dataSource
中的值,但是在 html 模板上使用它时,它说 this.dataSource 未定义.
有什么帮助吗?我在这里遗漏了什么吗?
使用 HTML 标记进行编辑
<div class="mat-elevation-z8">
<table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
修改您的代码如下:
<div class="mat-elevation-z8">
<table *ngIf="dataSource" mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
</table>
......
</div>
为什么我的代码不起作用:
You are trying to populate table data using datasource which not initialized. datasource gets value from service . Since the view is initialized before service gets called and that time dataSource is undefined, it is throwing the error.