Angular 表格显示不正确

我需要在表中显示元素的一个列表。我创建了两个组件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>

---

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

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

这样,

<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>

在

应用程序中显示列表项目手册.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;
}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“[bookList]”，
模板：`
{{book.id}
{{book.name}
`,
})
导出类AppShowListItemBookComponent{
@输入（）书籍：任意；
}

---

这里是演示

您认为它们在表中显示不正确是什么意思

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

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;
}