【发布时间】：2020-01-01 00:43:13
【问题描述】：
UI shows datasource.filtereddata but mat table is not getting populated
请查看链接中的屏幕截图。 Mat 表没有显示数据，下面是 html 和 typescript 的详细信息。有人可以看看吗？ 当我执行 datasource.filterdata 时，带有数据的 json 会显示在屏幕上。但是表没有映射到数据。控制台也显示数据。 控制台.log(this.dataSource); console.log(客户)
HTML
<mat-card *ngIf="!dataSource?.filteredData" style="margin-bottom: 5px">
<div><span>ZERO RESULT</span></div>
</mat-card>
<mat-card *ngIf="dataSource?.filteredData">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Id Column -->
<ng-container matColumnDef="user_PHONE_ID">
<th mat-header-cell *matHeaderCellDef mat-sort-header>phone Id</th>
<td mat-cell *matCellDef="let element">{{element.user_PHONE_ID}}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="phone_TYPE_CD">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Phone type cd</th>
<td mat-cell *matCellDef="let element">{{element.phone_TYPE_CD}}</td>
</ng-container>
<ng-container matColumnDef="last_MODIFIED_TS">
<th mat-header-cell *matHeaderCellDef mat-sort-header>last MODIFIED TS</th>
<td mat-cell *matCellDef="let element">{{element.last_MODIFIED_TS}}</td>
</ng-container>
<ng-container matColumnDef="phone_NBR">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Phone nbr</th>
<td mat-cell *matCellDef="let element">{{element.phone_NBR}}</td>
</ng-container>
<ng-container matColumnDef="user_ID">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Phone type cd</th>
<td mat-cell *matCellDef="let element">{{element.user_ID}}</td>
</ng-container>
<ng-container matColumnDef="creation_TS">
<th mat-header-cell *matHeaderCellDef mat-sort-header>creation ts</th>
<td mat-cell *matCellDef="let element">{{element.creation_TS}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-card>
<mat-paginator #paginator
[length]="dataSource?.data.length"
[pageIndex]="0"
[pageSize]="5"
[pageSizeOptions]="[5,10,25, 50, 100, 250]">
</mat-paginator>
打字稿
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { CustomerlistService } from './services/customerlist.service';
import { Customer } from './models/customer';
// const ELEMENT_DATA: Customer[] = [
// {lastModifiedTs: "1", phoneNbr: "1", userPhoneId: "1", phoneTypeCd: "1", userId: "1", creationTs: "1" },
// {lastModifiedTs: "2", phoneNbr: "12", userPhoneId: "12", phoneTypeCd: "12", userId: "12", creationTs: "12" },];
@Component({
selector: 'app-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;
dataSource= new MatTableDataSource<Customer>();;
customer;
customers: Customer[];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns: string[] = ['user_PHONE_ID', 'phone_TYPE_CD','last_MODIFIED_TS','phone_NBR','user_ID','creation_TS'];
constructor(private customerListService: CustomerlistService){}
ngOnInit() {
this.customerListService.getUserPhone()
.subscribe((customers : Customer[])=> {
this.customers = customers;
this.dataSource = new MatTableDataSource(customers)
console.log(this.dataSource);
console.log(customers);});
}
}
界面
export interface Customer {
last_MODIFIED_TS: string;
phone_NBR: string;
user_PHONE_ID: string;
phone_TYPE_CD: string;
user_ID: string;
creation_TS: string;
}
服务
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { Customer } from '../models/customer';
@Injectable({
providedIn: 'root'
})
export class CustomerlistService {
private _customers: BehaviorSubject<Customer[]>;
private dataStore : {
customer : Customer[]
}
private userPhoneUrl = 'http://localhost:8080/v1/userphones/115451';
constructor(private http: HttpClient) {
this.dataStore = { customer: [] };
this._customers = new BehaviorSubject<Customer[]>([]);
}
get customers(): Observable<Customer[]>{
return this._customers.asObservable();
}
getUserPhone() {
return this.http.get<Customer[]>(this.userPhoneUrl);
}
private handleError(err: HttpErrorResponse){
let errorMessage = '';
if (err.error instanceof ErrorEvent){
errorMessage = 'An error occured: ${err.error.message}';
} else {
errorMessage = 'Server returned code: ${err.status}, error message is:${err.message}';
}
console.error(errorMessage);
return throwError(errorMessage);
}
}
【问题讨论】：
-
您的属性名称与收到的数据不匹配。更改您的后端或单元格模板：
{{row.userPhoneId}}->{{row.user_PHONE_ID}} -
是的 -
<td mat-cell *matCellDef="let row">{{row.creationTs}}</td>这实际上应该是<td mat-cell *matCellDef="let row">{{row.creation_TS}}</td>（其他列也不正确）。另外，您的界面也不正确。 -
我用正确的属性名称更改了界面和 html，但仍然没有显示数据。@eldar @tftd
-
下次请提供
full的例子。您有一个ngIf，这意味着在检索数据之前不会初始化容器。 mat-filtering/mat-sort not work correctly when use ngif in mat-table parent -
没有 ngif 也不会显示数据。当我用静态数据替换服务调用时，它可以工作并且 mattable 会被填充。但是使用服务调用它不是。请查看代码和建议。我已经更新了最新代码。
标签： angular typescript