ng-repeat in angular 2

Question

单击详细信息按钮后，需要显示用于显示详细信息的文本区域。

它提供类似于此表结构的输出

      <table>
        <th>ID</th>
        <th>Title</th>
        <tr *ngFor = "let row of indexes">
        <td *ngFor = "let id of row>{{id}}</td>
        <td><button (click)="showDetails()">DETAILS</td>
       </tr>
       </table>

<tr *ngIf="isClicked"><td>{{id.details}}</td></tr> --->这需要显示在单击按钮的行旁边。

在角度1.x中，我们可以使用ng-repeat-start / ng-repeat-end实现此目的。 在角度2我有一个包含</template ngFor let-row [ngForOf]="indexes">的线索但不知道在哪里包含这个。 请建议。

Answer 1

如果我正确理解您的问题，您希望为每个indexes插入两个表行。

所以，如果你的组件类中有这样的东西：

rows: any[] = [
    { detailsVisible: false },
    { detailsVisible: false },
    { detailsVisible: false },
    { detailsVisible: false },
    { detailsVisible: false }
];

toggleDetails(row: any) {
    row.detailsVisible = !row.detailsVisible;
}

您可以使用ng-container ：

<table>

    <ng-container *ngFor="let row of rows">
        <tr>
            <td (click)="toggleDetails(row)">show details</td>
        </tr>

        <tr *ngIf="row.detailsVisible">
            <td>only visible after click on details cell</td>
        </tr>
    </ng-container>

</table>

希望这可以帮助。