Angular 4使用嵌套* ng

Question

我正在實施更新Web服務。 為此，我要從數據庫中獲取數據並用它填充表單字段。 然后，用戶需要編輯數據並提交以更新數據庫。

我需要通過復選框實現此幫助。 我正在嘗試使用嵌套的* ngFor來獲取2種不同的Web服務。 “ maintainanceTypeList”包含所有復選框選項，“ defaultmaintainance”包含用戶提交創建表單時選中的選項。 如您所見，我正在嘗試比較兩者的ID，並在比較結果為true時選中此復選框。

我的問題是，嵌套循環的迭代現在取決於我的默認維護有多少個對象，這意味着相同的復選框會多次顯示。

<label for="maintenancetype"
       class="text-3ab08b text-transform"
       style="margin-right: 1em;">
    Maintenance Type:
</label>
<span *ngFor="let x of maintainanceTypeList">
    <span *ngFor="let y of defaultmaintainance">
        <md-checkbox *ngIf="x.isDeleted == 0" 
                     name="{{x.maintenancetype}}" 
                     [checked]="x._id == y._id"
                     (change)="changeMaintainance($event.checked, x)" 
                     value="{{x.maintenancetype}}">
            {{x.maintenancetype}}
        </md-checkbox>
    </span>
</span>

編輯：這兩個數組都是對象數組，具有以下格式的多個對象：

isDeleted:"0"
maintenancetype:"Fixed"
status:"1"
_id:"5971da2c958ccd42a9c99f54"

Answer 1

我將修改maintainanceTypeList為每個項目添加一個附加屬性，該屬性顯示是否應檢查該項目：

let selectedIds = defaultmaintainance.map(item => item._id);

maintainanceTypeList.forEach(checkbox => {
    checkbox.checked = (selectedIds.indexOf(checkbox._id) > -1) ? true : false;
})

然后在單個* ngFor循環中顯示maintainanceTypeList ：

<span *ngFor="let x of maintainanceTypeList">
    <md-checkbox *ngIf="x.isDeleted == 0" 
                 name="{{x.maintenancetype}}" 
                 [checked]="x.checked"
                 (change)="changeMaintainance($event.checked, x)" 
                 value="{{x.maintenancetype}}">
        {{x.maintenancetype}}
    </md-checkbox>
</span>