Question

除了使用嵌套表，我正在尝试使用嵌套Array对象生成表，该表无法使外部表中的标题与内部表中的列正确对齐。

示例类：

 export class Result{
    id?: string;
    result?: string;
 }

 export class Entity{
    result?: Array<Result>;
    name?: string;
 }

 export class Test{
    entity?: Array<Entity>;
 }

数据：

{
   "test":{
      "entity":[
         {
            "name":"ABC",
            "result":[
               {
                  "id":"123",
                  "result":"AAA"
               },
               {
                  "id":"456",
                  "result":"SSS"
               }
            ]
         },
         {
            "name":"CDE",
            "result":[
               {
                  "id":"789",
                  "result":"BBB"
               },
               {
                  "id":"012",
                  "result":"CCC"
               }
            ]
         }
      ]
   }
}

预期的表结构： Expected table structure

在html模板中，如何在“ test.result”对象的内部循环中生成行？还是有更好的方法来做到这一点？

<tr *ngFor="let test of test.entity; let i=index;">
                    <td>{{test.name}}</td>
                    <ng-container *ngFor="let result of test.reslt; let j=index;"> // how to generate more row here?
                            <td style="width: 19%; text-align:center;">{{result.id}}</td>
                            <td style="width: 19%; text-align:center;">{{result.name}}</td>
                    </ng-container>
</tr>

谢谢您的帮助。

Answer 1

您可以将ng-template与嵌套的ng-container一起使用，并将index的值传递给模板。

喜欢以下内容：

<ng-template #rowTemplateOutlet let-index="index" let-entity="entity" let-result="result">
    <tr>
        <td [attr.rowspan]="entity.result.length" *ngIf="index == 0">
            {{entity.name}}
        </td>

        <td style="width: 19%; text-align:center;">{{result.id}}</td>
        <td style="width: 19%; text-align:center;">{{result.result}}</td>
    </tr>
</ng-template>

<ng-container *ngFor="let entity of test.entity;">
    <ng-container *ngFor="let result of entity.result; let i=index;">


        <ng-container  *ngTemplateOutlet="rowTemplateOutlet; context:{entity: entity, result: result, index: i}"> 
        </ng-container>

    </ng-container>
</ng-container>

希望有帮助

这是有效的stackblitz链接：https://stackblitz.com/edit/angular-1k3yn7

如何在不使用嵌套表的情况下使用嵌套数组对象生成表并在Angular 2中保持列对齐？

1 个答案: