UI shows datasource.filtereddata but mat table is not getting populated
请查看链接中的屏幕截图。Mat表格未显示数据,下面是html和打字稿的详细信息。请问有人可以看一下吗?当我执行datasource.filterdata ..但表未映射到data.Console时也会显示数据。console.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);
}
}
服务应返回对象数组以正确映射到MATTABLE数据源。
以下json未正确映射到mattable。{“ user_PHONE_ID”:115451,“ phone_TYPE_CD”:“ DAY”,“ phone_NBR”:“ 1111111111”,“ user_ID”:115821,“ creation_TS”:“ 2011-04-20T15:53:32.313 + 0000”,“ last_MODIFIED_TS” :null}
但是这可行[ {“ user_PHONE_ID”:115451,“ phone_TYPE_CD”:“ DAY”,“ phone_NBR”:“ 1111111111”,“ user_ID”:115821,“ creation_TS”:“ 2011-04-20T15:53:32.313 + 0000 “,” last_MODIFIED_TS“:null} ]