Угловой материал: таблица не содержит содержимого

Question

В настоящее время я работаю над небольшим Angular-проектом, основанным на учебном пособии «Тур героев».Тем не менее, «герой / герои» заменяется на «клиент / клиенты», но все по программированию одинаково.

Итак, у меня есть этот шаблон:

<!-- This part isn't working. -->
<table #table mat-table [dataSource]="customers" class="mat-elevation-z8">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let customer"> {{customer.id}} </td>
  </ng-container>
  <ng-container matColumnDef="surname">
    <th mat-header-cell *matHeaderCellDef> Surname </th>
    <td mat-cell *matCellDef="let customer"> {{customer.surname}} </td>
  </ng-container>

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

<!-- This part works - based on Tour of Heroes -->
<h2>Customers</h2>
<ul class="customers">
  <li *ngFor="let customer of customers">
    <a routerLink="/detail/{{customer.id}}">
      <span class="badge">{{customer.id}}</span> {{customer.surname}} {{customer.lastname}}
</a>
<button class="delete" title="delete customer" (click)="delete(customer)">x</button>
  </li>
</ul>

Этокомпонент к шаблону:

import { Component, OnInit } from '@angular/core';
import { Customer } from '../models/customer';
import { CustomerService } from '../customer.service';
import { MatTable } from '@angular/material';


@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {

  customers: Customer[];
  columnsToDisplay: ['ID', 'Surname'];

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.getCustomers();
  }

  getCustomers(): void {
    this.customerService.getCustomers().subscribe(customers => this.customers = customers);
  }

  delete(customer: Customer): void {
    this.customers = this.customers.filter(c => c !== customer);
    this.customerService.deleteCustomer(customer).subscribe();
  }
}

Консоль Chrome не выдает никаких ошибок.Я также импортировал MatTableModule в файл app.module.ts.

Моя проблема похожа на эта проблема , но я даже не получаю заголовки, и решение здесь не помогло.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Answer 1

Проблема в столбцах ToDisplay не соответствует.И вы должны обновить источник данных.

Вот мой ответ.

В вашем .html,

<table #table mat-table [dataSource]="customerDataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let customer">{{customer.id}}</td>
  </ng-container>

  <ng-container matColumnDef="surname">
    <th mat-header-cell *matHeaderCellDef>Surname</th>
    <td mat-cell *matCellDef="let customer">{{customer.surName}}</td>
  </ng-container>

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

<h2>Customers</h2>
<ul class="customers">
  <li *ngFor="let customer of customers">
    <a routerLink="/detail/{{customer.id}}">
      <span class="badge">{{customer.id}}</span> {{customer.surName}} {{customer.lastName}}
</a>
<button class="delete" title="delete customer" (click)="delete(customer)">x</button>
  </li>
</ul>

В вашем .ts,

import { Component, OnInit } from '@angular/core';
import { Customer } from '../models/customer';
import { CustomerService } from '../customer.service';
import { MatTableDataSource } from '@angular/material';


@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {

  customers: Customer[] = [];
  columnsToDisplay: ['position', 'surname'];
  customerDataSource = new MatTableDataSource(this.customers);

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.getCustomers();
  }

  getCustomers(): void {
    this.customerService.getCustomers().subscribe(customers => {
        this.customers = customers;
        this.customerDataSource.data = this.customers;
    });
  }

  delete(customer: Customer): void {
    this.customers = this.customers.filter(c => c !== customer);
    this.customerService.deleteCustomer(customer).subscribe();
  }
}

В customer.model.класс тс,

export class Customer{
    id: number;
    surName: string;
    lastName: string;
}

Answer 2

Кажется, проблема в том, что ваше определение columnsToDisplay (ID, фамилия) не соответствует столбцам, определенным в шаблоне как matColumnDef (позиция, фамилия), поэтому Angular не может найти / отобразить их.

Либо изменить в ts:

columnsToDisplay = ['position', 'surname'];

или в HTML:

<ng-container matColumnDef="ID">...</ng-container>
<ng-container matColumnDef="Surname">...</ng-container>