html - 是否可以有条件地关闭带有 Angular 2 的 html 标签？

Question

我需要这样的东西:

<tr>
  somecode...
</tr *ngIf="some condition">

当然不支持哪个，但是有什么方法可以实现这种行为吗？

我有一个表，我想使用一个组件递归地向它添加行，该组件接收节点的列表 (List)，遍历节点，打印它们并为每个节点的每个子节点调用自身，大致如下:

main.component.html

<table class="table table-bordered">
    <thead>
    <tr>
        <th>node names</th>
    </tr>
    </thead>
    <tbody>
        <tr app-rower [nodes]="nodes"></tr>
    </tbody>
</table>

rower.component.html:

<ng-container *ngFor="let node of tree">
    <tr>
        <td>
            {{node.name}}
        </td>
    </tr *ngIf="node.hasChildren">
    <tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
    </tr *ngIf="!node.hasChildren">
</ng-container>

所以最终的 html 将是:

<table>
    <thead>
        <tr>
            <th>node's names</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>node 1</td>
        </tr>
        <tr>
            <td>node 1's child</td>
        </tr>
        <tr>
            <td>node 1's grandchild</td>
        </tr>
        <tr>
            <td>node 2</td>
        </tr>
        <tr>
            <td>node 2's child</td>
        </tr>
    </tbody>
</table>

Answer 1

不，不支持。模板必须是有效的 HTML，否则 Angular 不会解析它。

<ng-container *ngFor="let node of tree">
    <tr>
        <td>
            {{node.name}}
        </td>
    </tr>
    <tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
    </tr>
</ng-container>