Angular 2 - Component无法正确呈现表标记

Question

我希望动态地将一些数据加载到表中。数据将显示在页面上，但不会在我的HTML表格中正确格式化。所有文本都出现在一行中，并且没有任何表格格式。我有一个包含以下信息的自定义组件：

HTML

  <table class="table table-hover">
    <thead>
      <tr>
        <th>Book Name</th>
        <th>Author Name</th>
      </tr>
    </thead>
    <tbody>
      <app-books *ngFor="let book of booksArray" [book]="book"></app-books>
    </tbody>
  </table>

我在名为@input()的子组件中有一个app-books装饰器。

app-books打样稿文件

  @Input() book: {title: string, author: string, cover_img: string};

  constructor() {
  }

app-books html file

<tr>
  <td>{{ book.title }}</td>
  <td>{{ book.author }}</td>
</tr>

Answer 1

如果您查看自己的标记，就会发现tr已嵌入app-books标记中。所以你的标记无效。参见

要解决此问题，建议您对组件使用[app-book]，以便将其指定为tr元素的属性：

<tr *ngFor="let book of booksArray" [app-book]="book"></tr>

另外，从<tr>组件标记中删除</tr>和app-book。请参阅说明这一点的Plunker sample。

<强>被修改

Angular 4引入了NgComponentOutlet指令，该指令在这种情况下很有用。但是，它不允许将Input参数传递给引用的组件。请参阅There is no way to access inputs or outputs of Components created by NgComponentOutlet问题。但是，我发现ng-dynamic-component包可以做到这一点。所以，你的代码可能是：

父组件：

<table class="table table-hover">
    <thead>
        <tr>
            <th>Book Name</th>
            <th>Author Name</th>
        </tr>
    </thead>
    <tbody>
        <ng-template ngFor let-item [ngForOf]="booksArray" let-i="index" [ngForTrackBy]="trackByFn">
            <ng-container [ngComponentOutlet]="AppBook" [ndcDynamicInputs]="{book: item}"></ng-container>
        </ng-template>
    </tbody>
</table>

行组件：

@Component({
  selector: 'tr[app-book]',
  template: `
    <td>{{ book?.title }}</td>
    <td>{{ book?.author }}</td>
  `
})
export class AppBook {
  @Input() book: { title: string, author: string, cover_img: string };
}

tr[app-book]选择器在这里非常重要。它告诉Angular使用tr属性呈现app-book元素。如果您将其指定为app-book，Angular将呈现<app-book>标记，这是无效标记。如果您将其指定为[app-book]，则Angular将呈现<div app-book>，这也是无效的。请参阅说明这一点的sample。

Answer 2

如果将完整的booksArray传递给子组件，它不仅可以更好地分离关注点，而且还允许您在组件级别操作该数据。

试试这个：

App.html

<app-books [books]="booksArray"></app-books>

AppBooksComponent.ts

export default class AppBooksComponent {
  @Input('booksArray') books: any;
  constructor() {}
}

AppBooksComponent.html

<tr *ngFor="book in books">
  <td>{{ book.title }}</td>
  <td>{{ book.author }}</td>
</tr>