角度材料表未填充数据

Question

我想用数据填充 Angular 材料表。在我的应用程序中，我有要显示的帐户和预订。帐户没有问题，但预订未输入表中。据我所知，这两个表之间没有相关的区别。代码如下：

accounts.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AccountsComponent } from './accounts.component';
import { HttpClientModule } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@NgModule({
    declarations: [ AccountsComponent ],
    imports: [ CommonModule, HttpClientModule, MatTableModule, MatProgressSpinnerModule ]
})
export class AccountsModule {}

accounts.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
    selector: 'app-accounts',
    templateUrl: './accounts.component.html',
    styleUrls: [ './accounts.component.scss' ]
})
export class AccountsComponent implements OnInit {
    public accounts: Account[] = [];
    public displayedColumns = [ 'id', 'name' ];
    public isLoading = true;

    constructor(private httpClient: HttpClient) {}

    ngOnInit(): void {}

    ngAfterViewInit(): void {
        this.httpClient.get(environment.backend + 'accounts').subscribe((data: Account[]) => {
            this.accounts = data;
            this.isLoading = false;
        });
    }
}

accounts.component.html

<table *ngIf="!isLoading" mat-table [dataSource]="accounts" class="mat-elevation-z2">
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let account">{{ account.id_pk }}</td>
    </ng-container>
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let account">{{ account.name }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let account; columns: displayedColumns"></tr> 
</table>

<mat-spinner *ngIf="isLoading"></mat-spinner>

---

bookings.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BookingsComponent } from './bookings.component';
import { HttpClientModule } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@NgModule({
    declarations: [ BookingsComponent ],
    imports: [ CommonModule, HttpClientModule, MatTableModule, MatProgressSpinnerModule ]
})
export class BookingsModule {}

bookings.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Booking } from './booking.interface';

@Component({
    selector: 'app-bookings',
    templateUrl: './bookings.component.html',
    styleUrls: [ './bookings.component.scss' ]
})
export class BookingsComponent implements OnInit {
    public bookings: Booking[] = [];
    public displayedColumns: ['id', 'amount', 'date', 'description', 'from', 'to'];
    public isLoading = true;

    constructor(private httpClient: HttpClient) {}

    ngOnInit(): void {}

    ngAfterViewInit(): void {
        this.httpClient.get(environment.backend + 'bookings').subscribe((data: Booking[]) => {
            this.bookings = data;
            this.isLoading = false;
            console.log(this.bookings);
        });
    }
}

bookings.component.html

<table *ngIf="!isLoading" mat-table [dataSource]="bookings" class="mat-elevation-z2">
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let booking">{{ booking.id_pk }}</td>
    </ng-container>
    <ng-container matColumnDef="amount">
        <th mat-header-cell *matHeaderCellDef>Betrag</th>
        <td mat-cell *matCellDef="let booking">{{ booking.amount }}</td>
    </ng-container>
    <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef>Datum</th>
        <td mat-cell *matCellDef="let booking">{{ booking.iso_date }}</td>
    </ng-container>
    <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
        <td mat-cell *matCellDef="let booking">{{ booking.description }}</td>
    </ng-container>
    <ng-container matColumnDef="from">
        <th mat-header-cell *matHeaderCellDef>Von Konto</th>
        <td mat-cell *matCellDef="let booking">{{ booking.from_fk }}</td>
    </ng-container>
    <ng-container matColumnDef="to">
        <th mat-header-cell *matHeaderCellDef>Auf Konto</th>
        <td mat-cell *matCellDef="let booking">{{ booking.to_fk }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let booking; columns: displayedColumns;"></tr> 
</table>

<mat-spinner *ngIf="isLoading"></mat-spinner>

---

The Accounts table looks like this

The Bookings table looks like this

Answer 1

表格是在数据源填充数据之前生成的。 也许试试 *ngIf='bookings'

Answer 2

我发现了错误。这是 bookings.component.ts 中的一个简单（令人尴尬的）语法错误。

错误是：

public displayedColumns: [ 'id', 'amount', 'date', 'description', 'from', 'to' ];

正确的是：

public displayedColumns: string[] = [ 'id', 'amount', 'date', 'description', 'from', 'to' ];