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文件中。

我的问题类似于this problem，但我什至没有得到头条新闻，解决方案也无济于事。

如果您需要更多信息，请告诉我。

Answer 1

问题似乎是您对columnsToDisplay（ID，姓氏）的定义与matColumnDef（位置，姓氏）模板中定义的列不匹配，因此Angular无法找到/显示它们。

ts中的任何一项更改：

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

或在HTML中：

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

Answer 2

问题是columnsToDisplay不匹配。并且您必须更新数据源。

这是我的答案。

在您的.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.ts类中，

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

角材料：表格不包含内容

2 个答案: