lundi 3 septembre 2018

Nested ngFor Angular 6 with index

Hello my problem is that i have nested ngFor and i would like to check all previous checkbox when a checkbox is clicked but only check the checkbox that are in the same feature, currently when i click on a checkbox it check also the checkbox that are not in the same features and item, here is my template

<div *ngFor="let item of xmlParser.Currentform.items let l = index" [hidden]="!hideItem[item.name]" style="margin-top: 100px;"
  class="form" id="name_">
  <h1></h1>
  <form class="aze" action="/" method="post">
    <div class="input-group mb-3 inpgr">
      <div class="input-group-prepend">
        <button type="button" id="uplo_" class="btn btn-outline-secondary">
          <i class="fas fa-upload"></i>
        </button>
        <button type="button" id="dropdown_" class="btn btn-outline-secondary dropdown-toggle-split lul" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-globe"></i>
        </button>
        <div class="dropdown-menu dropdown_ee">
          <div id="link_" class="link_">
            <input type="text" id="link_inpu_" style="border-radius: 0;" placeholder="votre lien ici" class="form-control"
              aria-label="Text input with segmented dropdown button">
          </div>
        </div>
      </div>
      <div class="contai" style="width: inherit;" id="input-container_">
        <input type="file" id="piece_jointe_" name="files" title="Load File" style="display: none" />
        <textarea id="dirinpu_" rows="4" cols="50"></textarea>
        <input type="text" class="form-control" id="metada_" aria-label="Text input with dropdown button" style="display: none;">
        <button type="button" class="btn btn-outline-secondary piece_jointe_" style="display: none;"></button>
      </div>
    </div>
  </form>
  <div class="table2">
    <mat-tab-group>
      <mat-tab *ngFor="let feature of item.features; let k = index" attr.semantic="" class="li_" label="">
        <div class="toki" attr.semantic="">
          <span *ngIf="feature.type==='sequence' || feature.type==='select'">
            <div *ngFor="let check of feature.tests; let i = index" class="col-md-12">
              <mat-checkbox [checked]="i <= finalC" (change)="checkAll($event.checked, i, k, l)"></mat-checkbox>
            </div>
          </span>
          <span *ngIf="feature.type==='bag'">
            <label class="col-md-12">
              <input attr.item="" type="radio" attr.feature="" attr.test="unk_" id="unk__"
                checked="checked" name="test__" value="" /> Unknown
            </label>
            <label *ngFor="let check of feature.tests" class="bob__ col-md-12">
              <input attr.item="" (click)="kek(check)" type="radio" attr.feature="" id="lo___"
                attr.test="" attr.kek="" name="test__" value=""
              /> 
            </label>
          </span>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>

Item have features and features have tests the index of item is "l" the index of feature is "k" and the index of test is "i"

here is the function that i use currently for checking the previous checkboxes but its dont work because it check the checkboxes that are not in the same feature and not the same item

  checkAll(c, i: number, k, l) {
console.log(c);
console.log(i + " test");
console.log(k + " feature");
console.log(l + " item");
if (c) {
  this.finalC = i
} else {
  this.finalC = i - 1
}}

so i captured the index of my elements, now what can i do with it to check the checkboxes only in the current item and feature ?




Aucun commentaire:

Enregistrer un commentaire