在 <tr> 中嵌入 Angular 指令

Question

我正在尝试让 angular 指令在 <tr> 中重复。没有指令，代码是

<tr *ngFor='let cluster of clusters'>
    <td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
        <span>{{ cluster.Name }}</span>
        <span>{{ cluster.StatusMessage }}</span>
    </td>
    <td style='width: 100%;'>
        ...
    </td>
</tr>

看起来像

重构指令时，我丢失了 <tr> 格式。重构代码为

<tr *ngFor='let cluster of clusters'>
    <cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>

簇行组件代码为：

<td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
    <span>{{ name }}</span>
    <span>{{ statusMessage }}</span>
</td>
<td style='width: 100%;'>
    ...
</td>

它有效，但 <tr> 格式消失了。

开发人员工具显示一个 <tr>，其中嵌套了一个 <cluster-row>，并且在其中嵌套了两个 <td>，正如我所料。

Answer 1

<tr> 不能包含 <cluster-row> 元素。

您可以使用属性选择器来代替

<tr *ngFor='let cluster of clusters'>
    <td cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>

和

@Component({
//@Directive({
  selector: '[cluster-row]'

然后 的组件或指令是 <td>，因此您不能在组件模板中重复它

style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'

可以添加到

@Component({ 
  selector: '[cluster-row]',
  styles: [...],

在 <tr> 中嵌入 Angular 指令

Embedding an Angular Directive in <tr>

angular2-directives

angular2-template

angular