Angular 4 正确使用嵌套的 *ngFor
Angular 4 using nested *ngFor correctly
我正在实施更新网络服务。为此,我从数据库中获取数据并用它填充表单字段。然后用户需要编辑数据并提交以更新数据库。
我需要帮助来实现这个复选框。我正在尝试使用嵌套 *ngFor 来获取 2 个不同的网络服务。 "maintainanceTypeList" 包含所有复选框选项,"defaultmaintainance" 包含用户提交创建表单时选中的选项。如您所见,我正在尝试比较两者的 id 并在比较 returns 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
,为每个项目添加一个额外的 属性,它显示是否应该检查此项目:
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>
我正在实施更新网络服务。为此,我从数据库中获取数据并用它填充表单字段。然后用户需要编辑数据并提交以更新数据库。
我需要帮助来实现这个复选框。我正在尝试使用嵌套 *ngFor 来获取 2 个不同的网络服务。 "maintainanceTypeList" 包含所有复选框选项,"defaultmaintainance" 包含用户提交创建表单时选中的选项。如您所见,我正在尝试比较两者的 id 并在比较 returns 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
,为每个项目添加一个额外的 属性,它显示是否应该检查此项目:
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>