Angular Typescript subscribed值为空，但数据仍提供给模板
Angular Typescript subscribed值为空，但数据仍提供给模板
提问于 2018-06-07 04:37:46
我对Angular和Typescript非常陌生，遇到了一个对我来说似乎很奇怪的问题。我正在尝试构建一个mat-table，并使用我的类的值来创建一个MatTableDataSource对象。我从get请求中获取后端的值，但每当我尝试在组件中使用恢复的值时，这些值都是空的，但是当需要加载模板时，它们突然出现了。
下面是我的组件：
import { Component, OnInit, ViewChild } from '@angular/core';
import { first } from 'rxjs/operators';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator, MatSort } from '@angular/material';
import { Invoice } from '../_models';
import { InvoiceService } from '../_services';
@Component({
selector: 'app-invoices',
templateUrl: './invoices.component.html',
styleUrls: ['./invoices.component.css']
})
export class InvoicesComponent implements OnInit {
displayedColumns=['rating', 'amount', 'debtor', 'serial', 'dateout', 'expiration', 'daysleft', 'fid']
invoices: Invoice[] = [];
dataSource= new MatTableDataSource<Invoice>(this.invoices);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
private invoiceService: InvoiceService
) { }
ngOnInit() {
this.loadInvoices();
console.log(this.invoices);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
private loadInvoices(){
this.invoiceService.getUserInvoices().pipe(first()).subscribe(invoices => {
this.invoices=invoices;
});
console.log(this.invoices);
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}下面是模板：
<h3> All Uploaded invoices:</h3>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<mat-table #table [dataSource]="invoices" matSort class="mat-elevation-z8">
<ng-container matColumnDef="rating">
<mat-header-cell *matHeaderCellDef mat-sort-header> Rating </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.rating}} </mat-cell>
</ng-container>
<ng-container matColumnDef="amount">
<mat-header-cell *matHeaderCellDef mat-sort-header> Amount </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.amount}} </mat-cell>
</ng-container>
<ng-container matColumnDef="debtor">
<mat-header-cell *matHeaderCellDef> Debtor </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.debtor}} </mat-cell>
</ng-container>
<ng-container matColumnDef="serial">
<mat-header-cell *matHeaderCellDef> Serial </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.serial}} </mat-cell>
</ng-container>
<ng-container matColumnDef="dateout">
<mat-header-cell *matHeaderCellDef> Dateout </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.dateout}} </mat-cell>
</ng-container>
<ng-container matColumnDef="expiration">
<mat-header-cell *matHeaderCellDef> Expiration </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.expiration}} </mat-cell>
</ng-container>
<ng-container matColumnDef="daysleft">
<mat-header-cell *matHeaderCellDef mat-sort-header > Days left </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.daysleft}} </mat-cell>
</ng-container>
<ng-container matColumnDef="fid">
<mat-header-cell *matHeaderCellDef> Fid </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.fid}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[3, 100, 200]" showFirstLastButtons></mat-paginator>
</div>
<p><a [routerLink]="['/login']">Logout</a></p>重要的部分是[dataSource]="invoices"，因为它填充了从loadInvoices方法发起的get请求中收集的数据。如果我把它改成[dataSource]="dataSource"，它就会变成一个空数组。类似地，我的两个console.logs都输出一个空数组。有没有办法使用我的请求中的数据来创建一个MatTableDataSource对象并将其传递给模板?如果有，我该如何做？
@DiabolicWords之后的新组件解决了它：
import { Component, OnInit, ViewChild } from '@angular/core';
import { first } from 'rxjs/operators';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator, MatSort } from '@angular/material';
import { Invoice } from '../_models';
import { InvoiceService } from '../_services';
@Component({
selector: 'app-invoices',
templateUrl: './invoices.component.html',
styleUrls: ['./invoices.component.css']
})
export class InvoicesComponent implements OnInit {
displayedColumns=['rating', 'amount', 'debtor', 'serial', 'dateout', 'expiration', 'daysleft', 'fid']
dataSource: MatTableDataSource<Invoice>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
private invoiceService: InvoiceService
) { }
ngOnInit() {
this.loadInvoices();
}
private loadInvoices(){
this.invoiceService.getUserInvoices().pipe(first()).subscribe(invoices => {
this.dataSource = new MatTableDataSource<Invoice>(invoices);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 04:44:22
问题来自于订阅一个可观察对象。您的console.log()-calls的处理时间比返回值早得多。这就是为什么你总是看到空对象，尽管几毫秒后，它们被数据填满了。
这样试试：
ngOnInit() {
this.loadInvoices();
}
private loadInvoices(){
this.invoiceService.getUserInvoices().pipe(first()).subscribe(invoices => {
this.invoices=invoices;
console.log(this.invoices);
this.dataSource = new MatTableDataSource<Invoice>(this.invoices);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50729199
复制相关文章
相似问题