角材料-垫台-消耗API

Question

我正在尝试使用来自api（python烧瓶）的数据填充一个mat-table，但没有成功。我可以在console.log上看到JSON，但是mat-table出现了：“错误：在getTableUnknownColumnError处找不到ID为” id“的列。”

您能帮我吗？

这是JSON API响应：

{
"data": [
    {
        "created_on": "2019-12-23T03:30:24",
        "id": 1,
        "name": "Test Name 1",
        "username": "[email protected]"
    },
    {
        "created_on": "2019-12-26T16:35:38",
        "id": 2,
        "name": "Test Name 2",
        "username": "[email protected]"
    }
],
"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>

console.log（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。