Question

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

<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

您可以使用 Attribute 指令使表格正常工作

像这样

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

这是Stackblitz 演示

表格显示不正确

1 个答案: