我试图获得一个角度指令在<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>
,正如我所料。
答案 0 :(得分:3)
<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: [...],