使用typescript数组创建矩阵

Question

我的打字稿代码有一个包含stepid，stepName，aoiId，aoiName，isChecked和isStepForAoi的数组。 stepId和aoiId的每个组合都是唯一的。我需要在矩阵中显示此内容，其中列由AoiNames和由stepNames组成的行组成。

allStepAoiList =
[
    {
        stepId: "1",
        stepName: "Phase 1",
        aoiId: "10",
        aoiName: "AOI 1",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "1",
        stepName: "Phase 1",
        aoiId: "11",
        aoiName: "AOI 2",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "1",
        stepName: "Phase 1",
        aoiId: "12",
        aoiName: "AOI 3",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "2",
        stepName: "Phase 2",
        aoiId: "10",
        aoiName: "AOI 1",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "2",
        stepName: "Phase 2",
        aoiId: "11",
        aoiName: "AOI 2",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "2",
        stepName: "Phase 2",
        aoiId: "12",
        aoiName: "AOI 3",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "3",
        stepName: "Phase 2 Consensus",
        aoiId: "10",
        aoiName: "AOI 1",
        isChecked: false,
        isStepForAoi: false
    },
    {
        stepId: "3",
        stepName: "Phase 2 Consesus",
        aoiId: "11",
        aoiName: "AOI 2",
        isChecked: false,
        isStepForAoi: false
    },
    {
        stepId: "3",
        stepName: "Phase 2 Consensus",
        aoiId: "12",
        aoiName: "AOI 3",
        isChecked: false,
        isStepForAoi: false
    },
];

我的html显示矩阵

              <table class="k-grid">
                    <tr class="k-alt">
                        <td>Step</td>
                        <td>Select All</td>
                        <td *ngFor="let item of allStepAoiList;">
                            {{ item.aoiName }}
                        </td>
                    </tr>
                    <tr class="k-alt">
                        <td></td>
                        <td><input type="checkbox" /></td>
                        <td *ngFor="let item of allStepAoiList;">
                            <input type="checkbox" />
                        </td>
                    </tr>
                    <tr *ngFor="let item of allStepAoiList; let odd = odd;" [ngClass]="{ 'k-alt': odd}">
                        <td style="text-align:left">{{ item.stepName }}</td>
                        <td style="text-align:center"><input type="checkbox" /></td>
                        <td *ngFor="let item of allStepAoiList;" style="text-align:center">
                            <div *ngIf="item.isStepForAoi">
                                <input type="checkbox"
                                       (change)="getStepAoiDataList($event,aoi,advisorStep)" />
                            </div>
                        </td>
                    </tr>
                </table>

现在它为AOI和9行步骤显示9列：我希望它只显示3个不同的aoi列和3个不同的步骤行以及9个复选框。有什么建议吗？