1

我正在实施更新网络服务。为此，我从数据库中获取数据并用它填充表单字段。然后用户需要编辑数据并提交以更新数据库。

我需要帮助使用复选框来实现这一点。我正在尝试使用嵌套的 *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"
4

1 回答 1

2

我会修改maintainanceTypeList为每个它的项目添加一个附加属性，该属性显示是否检查该项目：

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

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

然后maintainanceTypeList在单个 *ngFor 循环中显示：

<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>
于 2017-07-26T14:02:56.780 回答