ng wiederholt Start/Ende in Angular 2

Question

Bevor ich so etwas wie dies in Angular 1.x tun könnte:

<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> 

Dies ermöglicht die Auf- und Zuklappen Zeile wiederholt werden.

bearbeiten: bitte beachten ng-repeat-end befindet sich auf dem zweiten tr-element, so dass Paare von tr-elementen wiederholt werden können. Wenn ich den ng-repeat-start und end nicht hinzufügen würde, wäre es mir nicht erlaubt, den zweiten ng-repeat innerhalb des Resource-Details-Elements zu verwenden. ngFor erlaubt für dieses Verhalten nicht das gleiche Setup wie Winkel 1.x

Wie kann ich dies in Angular 2.0.1 erreichen?

Answer 1

Ich habe das herausgefunden, nachdem ich realisiert habe, dass ich die falsche Syntax verwende.

Also das Element verwenden, wie so ng-Repeat-Start/Ende-Verhalten

</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> 

Beachten Sie die * ngFor auf dem Ressource-Details Element innerhalb des zweiten tr zu erreichen. Alles funktioniert super.