Angular MATABLE不显示数据

问题描述 投票:-1回答:1

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);
  }                                          
}
angular typescript
1个回答
0
投票

服务应返回对象数组以正确映射到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} ]

© www.soinside.com 2019 - 2024. All rights reserved.