Angular 4 mit nested * ngFor korrekt

Question

Ich implementiere einen Update-Webservice. Dazu hole ich Daten aus der Datenbank und befülle damit die Formularfelder. Der Benutzer muss dann die Daten bearbeiten und zur Aktualisierung der Datenbank senden.

Ich brauche Hilfe bei der Umsetzung dieses Kontrollkästchens. Ich versuche, nested * ngFor zu verwenden, um 2 verschiedene Webservices zu holen. "maintainanceTypeList" enthält alle Kontrollkästchenoptionen und "defaultmaintainance" enthält die Optionen, die beim Übergeben des Formulars durch den Benutzer überprüft wurden. Wie Sie sehen können, versuche ich die ID der beiden zu vergleichen und das Kontrollkästchen zu aktivieren, wenn der Vergleich wahr ist.

Mein Problem ist, dass Iterationen der verschachtelten Schleifen jetzt davon abhängen, wie viele Objekte meine defaultmaintainance hat, was bedeutet, dass dieselben Checkboxen mehrfach angezeigt werden.

<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: Sowohl die Arrays Array von Objekten mit mehreren Objekten in diesem Format:

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

Answer 1

ich ändern würde maintainanceTypeList zu jeder Zugabe es Artikel eine zusätzliche Eigenschaft, die zeigt, sollte dieser Punkt sein geprüft oder nicht:

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

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

und dann maintainanceTypeList * innerhalb einer einzigen Anzeige ngFor Schleife:

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