动态Mat-Table - Table为空

Question

我在使用mat-table构建动态数据表时遇到了问题。

我把它构建得非常接近Angular Docs上的例子。

这是我的.ts文件：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../../core/services/api.service';
import { Course } from '../../../../core/models/course.model';

enum courseType {
  onDemand = 1,
  live = 0,
}

enum sort {
  upcoming = 0,
  title = 1
}

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
export class CoursesComponent implements OnInit {
  page = 1;
  sort = sort.upcoming;
  type = courseType.live;
  filters: CourseFilters;

  displayedColumns: string[] = ['Name', 'Start Date', 'End Date', 'Authors', 'Active', 'Event Id', 'TMS Id'];

  dataSource: Course[];

  constructor(private api: ApiService) { }

  ngOnInit() {
    this.getCourses();
  }

  onTabChange(e) {
    if (e.tab.textLabel === 'Live') {
      this.type = courseType.live;
    } else {
      this.type = courseType.onDemand;
    }

    this.getCourses();
  }

  getCourses() {
    this.filters = {
      authors: [],
      tags: [],
      title: '',
      tmsId: ''
    };

    this.api.getCourses(this.filters, this.page, '', this.sort, this.type, true, 10).subscribe(response => {
      this.dataSource = response.result;
      console.log(this.dataSource);
    });
  }
}

和我的html：

<mat-card class="container">

  <mat-tab-group (selectedTabChange)="onTabChange($event)">
    <mat-tab label="Live"></mat-tab>
    <mat-tab label="On Demand"></mat-tab>
  </mat-tab-group>

  <mat-card-content *ngIf="dataSource">
    <table mat-table [dataSource]="dataSource">

      <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
        <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
      </ng-container>

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

课程模型如下所示：

export interface Course {
  name: string;
  startDate: Date;
  endDate: Date;
  authors: string[];
  active: boolean;
  id: number;
  trainingSystemId1: string;
}

典型的课程obj如下所示：

active: true
authors: (3) ["...", "...", "..."]
endDate: "2019-08-29T16:00:00"
id: 1111
name: "..."
startDate: "2019-08-29T15:00:00"
trainingSystemId1: "11111"

api服务方法getCourses()从服务器返回课程列表。

ApiService：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { ApiResponse } from '../models/api-response.model';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  // Courses
  // tslint:disable-next-line: max-line-length
  getCourses(filters: any, page: number, search: string, sort: number, type: number, detailed: boolean, limit?: number,): Observable<ApiResponse> {
    const coursesFilter = {
      type,
      page,
      sort,
      filters,
      search,
      limit,
      detailed,
    };

    return this.http.post<any>(`${environment.apiUrl}courses`, coursesFilter);
  }

  getCourse(id: number): Observable<ApiResponse> {
    return this.http.get<ApiResponse>(`${environment.apiUrl}course/${id}`);
  }
}

我一直收到“提供的数据源与数组、可观察值或DataSource不匹配”的错误。你知道我做错了什么吗？

Answer 1

只需在t中添加之后才在html文件中添加<table mat-table [dataSource]="dataSource" #table> #table<table mat-table [dataSource]="dataSource" #table>，并在将数据赋值到dataSource变量时，将this.table.renderRows();语句

this.dataSource = data;
this.table.renderRows();