在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5/ Angular4 索引循環(huán)ID（基礎(chǔ)問(wèn)題）

Angular4 索引循環(huán)ID（基礎(chǔ)問(wèn)題）

有如下復(fù)選框代碼，當(dāng)前的BUG是單擊標(biāo)題“復(fù)旦大學(xué)”，整個(gè)“北京大學(xué)”全部被選中了。應(yīng)該是因?yàn)?code><input id="checkbox6" 和 <label for="checkbox6" 相同的原因吧。如何在 ngFor里加一個(gè)索引，使循環(huán)出來(lái)的每一組 input 和 label的 ID 不同呢？

圖片描述

<div>
  <label><input type="checkbox" [(ngModel)]="checked" (change)="selectAll()">全選</label>
  <div style="padding-left:1em" *ngFor="let item of datas">

    <input id="checkbox6" type="checkbox" [(ngModel)]="item.checked" (change)="selectItemAll(item)">
    <label for="checkbox6">{{item.title}}</label>

    <div style="padding-left:1em" *ngFor="let item1 of item.items">
      <label><input type="checkbox" [(ngModel)]="item1.checked" (change)="selectItem(item1,item)">選擇</label>
      名稱(chēng)：{{item1.name}} 價(jià)格：{{item1.price}}
    </div>
    

  </div>
</div>
回答
編輯回答
淚染裳

<div>
<label><input type="checkbox" [(ngModel)]="checked" (change)="selectAll()">全選</label>
<div style="padding-left:1em" *ngFor="let item of datas; let j = index;">

<input id="checkbox6{{j}}" type="checkbox" [(ngModel)]="item.checked" (change)="selectItemAll(item)">
<label for="checkbox6{{j}}">{{item.title}}</label>

<div style="padding-left:1em" *ngFor="let item1 of item.items">
  <label><input type="checkbox" [(ngModel)]="item1.checked" (change)="selectItem(item1,item)">選擇</label>
  名稱(chēng)：{{item1.name}} 價(jià)格：{{item1.price}}
</div>

</div>
</div>

2017年1月17日 06:05