Блог

Я хотел бы заполнить таблицу угловых материалов данными. В моем приложении у меня есть учетные записи и заказы, которые я хочу отобразить. Проблем с учетными записями нет, но заказы не вводятся в таблицу. Насколько я вижу, между двумя таблицами нет существенной разницы. Вот код:

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>
  

Таблица учетных записей выглядит следующим образом

Таблица заказов выглядит следующим образом

Таблица создается до того, как источник данных будет заполнен данными. Возможно, попробуйте использовать *ngIf=’bookings’

Я обнаружил ошибку. Это была простая (смущающая) синтаксическая ошибка в bookings.component.ts.

Ошибка заключалась в:

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

правильно:

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