Angular 4 using nested *ngFor correctly

Question

I am implementing an update webservice. For that I am fetching data from database and populating the form fields with it. The user then needs to edit the data and submit it to update the database.

I need help implementing this with checkboxes. I am trying to use nested *ngFor to fetch 2 different webservices. "maintainanceTypeList" contains all the checkbox options and "defaultmaintainance" contains the options that were checked when user submitted the create form. As you can see I am trying to compare the id of the two and check the checkbox when the comparison returns true.

My problem is that iterations of the nested loops now depend on how many objects my defaultmaintainance has which means same checkboxes are displayed multiple times.

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

edit: Both the arrays are array of objects with multiple objects in this format:

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

Retracted. Can you also please post what maintainanceTypeList and defaultmaintainance look like? — msanford
– msanford, Commented Jul 26, 2017 at 13:21
Ah so maintainanceTypeList and defaultmaintainance are the same type? — msanford
– msanford, Commented Jul 26, 2017 at 14:04
Yes. Basically I want to compare the id of the two and when they are the same I want the checkbox to be checked. — Ninad Gaikwad
– Ninad Gaikwad, Commented Jul 26, 2017 at 14:29

msanford · Accepted Answer · 2017-07-26 14:15:34Z

2

I would modify maintainanceTypeList adding to each it's item an additional property which shows should this item be checked or not:

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

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

And then display maintainanceTypeList within a single *ngFor loop:

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

edited Jul 26, 2017 at 14:15

msanford

12.4k13 gold badges73 silver badges100 bronze badges

answered Jul 26, 2017 at 14:02

hiper2d

2,9141 gold badge20 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 using nested *ngFor correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related