title: Angular 4 using nested *ngFor correctly
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;label for="maintenancetype"
         class="text-3ab08b text-transform"
         style="margin-right: 1em;"&gt;
      Maintenance Type:
  &lt;/label&gt;
  &lt;span *ngFor="let x of maintainanceTypeList"&gt;
      &lt;span *ngFor="let y of defaultmaintainance"&gt;
          &lt;md-checkbox *ngIf="x.isDeleted == 0" 
                       name="{{x.maintenancetype}}" 
                       [checked]="x._id == y._id"
                       (change)="changeMaintainance($event.checked, x)" 
                       value="{{x.maintenancetype}}"&gt;
              {{x.maintenancetype}}
          &lt;/md-checkbox&gt;
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>edit: Both the arrays are array of objects with multiple objects in this format:</p>
  
  <pre class="lang-html prettyprint-override"><code>isDeleted:"0"
  maintenancetype:"Fixed"
  status:"1"
  _id:"5971da2c958ccd42a9c99f54"
  </code></pre>