ng 重复开始/结束于 Angular 2

Question

在我可以在 Angular 1.x 中做这样的事情之前：

<tbody>
    <tr class="resource-row" ng-click="expandRow(resource.id)" ng-repeat-start="resource in resources track by $index">
        <td>
            <a ng-bind="resource.id"></a>
        </td>
    </tr>
    <tr ng-repeat-end="" class="resource-sub-row" ng-show="resource.expand">
        <td colspan="4">
            <div class="resource-details" ng-repeat="details in resource.details">
                <div class="stream-data form-inline col-md-12">
                    <div class="col-md-12 form-group">
                        <label>Resource Details: </label>
                        <div>{{resource.level}}</div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</tbody>

这允许重复展开和折叠行。

编辑：请注意 ng-repeat-end 在第二个 tr 元素上，允许重复 tr 元素对。如果我没有添加 ng-repeat-start 和 end，我将不允许在 resource-details 元素中使用第二个 ng-repeat。 ngFor 不允许此行为与 angular 1.x

相同的设置

如何在 Angular 2.0.1 中完成此操作？

Answer 1

在意识到我使用了错误的语法后，我想通了。

所以像这样使用元素来实现ng-repeat-start/end行为

</template ngFor let-resource [ngForOf]="resources">
    <tr class="resource-row" ng-click="expandRow(resource.id)">
        <td>
            <a ng-bind="resource.id"></a>
        </td>
    </tr>
    <tr class="resource-sub-row" ng-show="resource.expand">
        <td colspan="4">
            <div class="resource-details" *ngFor="let details of resource.details">
                <div class="stream-data form-inline col-md-12">
                    <div class="col-md-12 form-group">
                        <label>Resource Details: </label>
                        <div>{{resource.level}}</div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</template>

注意第二个 tr 中 resource-details 元素上的 *ngFor。一切都很好。

ng 重复开始/结束于 Angular 2

ng repeat start / end in Angular 2

ngfor

angular