我目前正在研究一个小的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,但我什至没有得到头条新闻,解决方案也无济于事。
如果您需要更多信息,请告诉我。
答案 0 :(得分:0)
问题似乎是您对columnsToDisplay
(ID,姓氏)的定义与matColumnDef
(位置,姓氏)模板中定义的列不匹配,因此Angular无法找到/显示它们。
ts
中的任何一项更改:
columnsToDisplay = ['position', 'surname'];
或在HTML
中:
<ng-container matColumnDef="ID">...</ng-container>
<ng-container matColumnDef="Surname">...</ng-container>
答案 1 :(得分:0)
问题是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;
}