角4使用嵌套* ngFor正确

问题描述：

我正在实施更新webservice。为此，我从数据库中提取数据并使用它填充表单域。然后用户需要编辑数据并提交它以更新数据库。角4使用嵌套* ngFor正确

我需要帮助实现这与复选框。我正在尝试使用嵌套的* ngFor来获取2个不同的Web服务。 “maintenanceanceTypeList”包含所有复选框选项，“defaultmaintainance”包含用户提交创建表单时选中的选项。正如你所看到的，我试图比较两者的id，并在比较返回true时检查复选框。

我的问题是，嵌套循环的迭代现在取决于我的defaultmaintainance有多少对象，这意味着多次显示相同的复选框。

<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"

不需要我需要访问两个完全不同的数组。 –

缩回。你也可以请发布'maintainanceTypeList'和'defaultmaintainance'的样子吗？ – msanford

我已经更新了问题 –

答

我将修改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>

角4使用嵌套* ngFor正确

相关推荐