Javascript 角度2-组件无法正确渲染表标记

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

HTML 应用程序书籍html文件

{{book.title}}
{{book.author}}

如果您将完整的

booksArray

传递给子组件，它不仅可以更好地分离关注点，还允许您在组件级别操作该数据

试试这个：

App.html

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

AppBooksComponent.html

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

{{book.title}}
{{book.author}}

如果您将完整的

booksArray

传递给子组件，它不仅可以更好地分离关注点，还允许您在组件级别操作该数据

试试这个：

App.html

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

AppBooksComponent.html

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

{{book.title}}
{{book.author}}

如果您查看您的标记，您将看到您的

tr

嵌入到

应用程序手册

标记中。所以你的标记是无效的。看

为了解决这个问题，我建议您对组件使用

[app book]

，以便您可以将其指定为

tr

元素的属性：

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

行组件：

@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[应用程序手册]”，
模板：`
{{书？.title}
{{book？.author}}
`
})
导出类应用程序集{
@Input（）书：{标题：string，作者：string，封面：string}；
}

---

tr[app book]

选择器在这里很重要。它告诉Angular使用

appbook

属性渲染

tr

元素。如果将其指定为

应用程序手册

，Angular将呈现说明这一点的

。
如果查看标记，您将看到
tr
嵌入在
应用程序手册
标记中。所以你的标记是无效的。看


为了解决这个问题，我建议您对组件使用
[app book]
，以便您可以将其指定为
tr
元素的属性：

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

行组件：

@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[应用程序手册]”，
模板：`
{{书？.title}
{{book？.author}}
`
})
导出类应用程序集{
@Input（）书：{标题：string，作者：string，封面：string}；
}

tr[app book]
选择器在这里很重要。它告诉Angular使用
appbook
属性渲染
tr
元素。如果您将其指定为
app book
，Angular将呈现说明这一点的
。
奇怪的是，HTML表中的格式仍然有点不正确。奇怪的是，HTML表中的格式仍然有点不正确。酷！我原以为我们不能将表的任何部分分割成子组件。因此，您不能将
tr
与
表或
tbody
分开，但可以将
td
与
tr
分开。很高兴知道！谢谢这是我走的路线。谢谢你的信息@RyanShocker我真的很喜欢这个案例，我花了一些时间来找到更好的解决方案。查看更新的答案。酷！我原以为我们不能将表的任何部分分割成子组件。因此，您不能将
tr
与
表或
tbody
分开，但可以将
td
与
tr
分开。很高兴知道！谢谢这是我走的路线。谢谢你的信息@RyanShocker我真的很喜欢这个案例，我花了一些时间来找到更好的解决方案。查看更新的答案。
@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 };
}