javascript - Angular 2 中的 ng 重复

Question

单击详细信息按钮后，需要显示一个文本区域来显示详细信息。

它给出了类似于 table structure 的输出

      <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> ---> 这需要在单击按钮的行旁边显示。

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

Answer 1

如果我对你的问题的理解正确，你想为你的每个索引插入两个表行。

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

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>

希望这对您有所帮助。