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

在角度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>

希望这有帮助。

ng-repeat in angular 2

1 个答案: