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 {}

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 {}

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;
        });
    }
}

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);
        });
    }
}

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>

<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>

预订

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;
        });
    }
}

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]="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>

<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>

身份证件
{{booking.id_pk}
贝特拉格
{{booking.amount}}
资料
{{booking.iso_date}
贝施雷邦
{{booking.description}}
冯孔托
{{booking.from_fk}}
奥夫康托
{{booking.to_fk}}

---

---

在数据源填充数据之前生成该表。

---

也许试试*ngIf='bookings'

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

错误是：

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

正确答案是：

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

---

您是否尝试在调用中插入中断符以检查数据是否为空？是否检查开发人员工具中是否存在错误？F12？是的，是的。任何控制台中都没有错误，数据也不为空。我将此用作我显示的列的声明=>displayedColumns=['actions'、'Servername'、'State']您不需要指定类型