角材料 - mat-table - 消耗 API

Question

我試圖用來自 api（python 燒瓶）的數據填充 mat-table，但沒有成功。 我可以在 console.log 上看到 JSON，但是 mat-table 出現了：“錯誤：找不到 ID 為“id”的列。在 getTableUnknownColumnError 處。”

請你幫助我好嗎？

這是 JSON api 響應：

{
"data": [
    {
        "created_on": "2019-12-23T03:30:24",
        "id": 1,
        "name": "Test Name 1",
        "username": "email1@emmail.com"
    },
    {
        "created_on": "2019-12-26T16:35:38",
        "id": 2,
        "name": "Test Name 2",
        "username": "email2@email.com"
    }
],
"message": "Success!"

}

這是獲取 http.get 的服務：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import {Observable, of} from 'rxjs';
import {map} from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) { }

  getAll(): Observable<any> {
    return this.http.get('http://localhost:5000/api/user/list_all').pipe(
      map(this.extractData));
  }

  private extractData(res: Response) {
    console.log(res);
    return res || {}; // If 'res' is null, it returns empty object
  }
}

它是角度數據表組件：

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {UserService} from '../user.service';
import {Observable} from 'rxjs';
import {User} from '../user.model';
import {DataSource} from '@angular/cdk/collections';

export interface IUser {
  data: {
    id: number;
    name: string;
    username: string;
  };
  message: string;
}

@Component({
  selector: 'app-user-datatable',
  templateUrl: './user-datatable.component.html',
  styleUrls: ['./user-datatable.component.css']
})
export class UserDatatableComponent implements OnInit {
  displayedColumns: string[] = ['id'];
  dataSource = new MatTableDataSource();

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(public userService: UserService) {
  }

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.getUsers());
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }


  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  getUsers() {
    this.userService.getAll().subscribe((data: {}) => {
      console.log(data);
      console.log(data.data);
      console.log(data.message);
      this.dataSource.data = data.data; // on data receive populate dataSource.data array
      return data.data;
    });
  }
}

這是查看頁面：

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let user"> {{user.id}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let user; columns: displayedColumns;"></tr>
</table>

控制台日志（res）；

Answer 1

您需要在 HTML 中定義“id”列。

<!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let user"> {{user.id}} </td>
  </ng-container>

這有一列定義為“位置”。

將位置更改為 id。

你displayedColumns陣列必須有匹配matColumnDef的每一個。