ネストされた* ngForを使用した角4正確に

Question

私は更新Webサービスを実装しています。そのために、私はデータベースからデータを取得し、フォームフィールドにデータを入力しています。その後、ユーザーはデータを編集してデータベースを更新する必要があります。

私はチェックボックスを使ってこれを実装するのに助けが必要です。私は2つの異なるwebservicesをフェッチするために入れ子* ngForを使用しようとしています。 "maintainanceTypeList"にはすべてのチェックボックスオプションが含まれ、 "defaultmaintainance"にはユーザーが作成フォームを送信したときにチェックされたオプションが含まれています。あなたが見ることができるように私は2つの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" 

Answer 1

私はそれが示し、この項目があるべき追加のプロパティ項目のそれぞれに追加maintainanceTypeListを変更することになりますチェックされているかどうか：

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

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

そして、maintainanceTypeListを1つの* 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>