表格显示不正确

Question

我需要在表中显示一个元素列表。我创建了两个组件 tableComponent 和 tableitemComponet。所以我在表格中做：

<table class="table">
<thead>
<tr>
<th >Name</th>
<th> Price</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<app-show-list-item-book *ngFor="let book of books" [book]="book"  (deletebook)="deleteBook($event)" >
</app-show-list-item-book>
</tbody>
</table>

和app-show-list-item-book：

<tr>
<td>{{ book.name}}</td>
<td class="align_right">{{ book.price | number : '1.2-2'}}</td>
<td class="align_right">{{ bool.date| date: 'dd/MM/yyyy'}}</td>
<input type="hidden" name="id" value="{{ book.id }}"/>
</tr>

问题是我读取了该值，但它们未正确显示在表中。有人可以帮助我吗？

Answer 1

您可以使用属性指令使表正常工作

像这样，

<table class="table">
<thead>
<tr>
<th >Name</th>
<th> Price</th>
<th>Date</th>
</tr>
</thead>
<tbody bookList [book]="books" (deletebook)="deleteBook($event)">
</tbody>
</table>

并在app-show-list-item-book.html

<tr *ngFor="let book of books" >
<td>{{ book.id}}</td>
<td class="align_right">{{ book.name}}</td>
</tr>

在app-show-list-item-book.ts

import { Component, Input } from '@angular/core';
@Component({
selector: '[bookList]',
template: `<tr *ngFor="let book of books" >
<td>{{ book.id}}</td>
<td class="align_right">{{ book.name}}</td>
</tr>`,
})
export class AppShowListItemBookComponent {
@Input() books: any;
}

这是堆栈闪电战演示