自定义 Angular 组件不会在模板中呈现为 TR

Question

我正在重新设计一个表格，我想引入我自己的自定义组件，而不是默认的 TR 元素。该表按预期工作，看起来像这样。

<table>
  <thead>
    <tr><th *ngFor="let column of this.columns">{{column.title}}</th></tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of this.rows"></tr>
  </tbody>
</table>

然后，我引入了我自己的组件来替换通常的 TR，并将网格的标记切换为以下内容。

<table>
  <thead>
    <tr><th *ngFor="let column of this.columns">{{column.title}}</th></tr>
  </thead>
  <tbody>
    <row *ngFor="let row of this.rows" [value]="row" [formats]="columns"></row>
  </tbody>
</table>

新组件的标记非常简陋，如下所示。

<td *ngFor="let format of formats">
  {{value[format.id]}}
</td>

它确实有效。 IE。我可以看到值但所有生成的 TD（我可以确认检查 devtools）都呈现在表的第一列中。所以数据绑定有效。标记的生成工作。唯一失败的是愚蠢的浏览器没有得到 ROW 应该是一行（就像 TR 一样）。它认为可以将其渲染为单个 TD。

我如何告诉愚蠢的浏览器按我的意思做，而不是按我说的做？

Answer 1

我认为这是因为它无法将 row 识别为 tr，因此无法正确渲染 table。

尝试像这样使用您的组件：

@Component({ 
   selector: '[row]',
   template: `
   <td *ngFor="let format of formats">
      {{value[format.id]}}
   </td>
   ` 
})

然后在你的桌子上：

<tr row></tr>

这样，每个人都会将tr 识别为tr，但它的行为会像您希望的那样：使用您的row 组件。

（我在使用自定义菜单元素时遇到了同样的问题。它无法识别 li 元素。使用 <li my-element> 解决了这个问题。）