AngularJS - ng-ifの1つの要素を更新すると、すべての要素が更新されます。

Question

私は、テーブルを作成するために、angluar2とTypeScriptを使用しています。同じ行の<td>の<select>をどのようにして独立させるかを理解できませんでした。私のコードでは、ユーザーは任意の列からオプションを選択できます。ユーザーがオプションを選択すると、同じ行のすべての列が更新されます。

<!-- 
    public _tableHeaders: Array of Object; 
    public _rosters: Array of Object; 
    public _dutyOptions: Array of Object; 
--> 

<div class="row"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th style="width:55px" *ngIf="_tableHeaders"></th> 
     <!-- col for 'name'--> 
     <th style="width:10px" *ngFor="let hdr of _tableHeaders"> 
      <div>{{hdr.DayOfMonth}}</div> 
      <div>{{hdr.DayOfWeek}}</div> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let rosterList of _rosters"> 
     <template ngFor let-roster="$implicit" [ngForOf]="rosterList"> 
      <td *ngIf="roster.Switch == 'n'" style="width:55px">{{roster.DutyOption}}</td> 
      <td *ngIf="roster.Switch == 'c'" style="width:55px">{{roster.DutyOption}}</td> 
      <td *ngIf="roster.Switch == 'p'" style="width:10px">{{roster.DutyOption}}</td> 
      <td *ngIf="roster.Switch == 'u' && roster.UserId != _userId" style="width:10px">{{roster.DutyOption}}</td> 
      <td *ngIf="roster.Switch == 'u' && roster.UserId == _userId" style="width:10px"> 
      <select class="form-control input-sm" [ngModel]="_selDutyOption" (ngModelChange)="updateUserRequest($event, roster)"> 
       <option></option> 
       <option *ngFor="let dutyOption of _dutyOptions; let j=index" (ngValue)="dutyOption" [selected]="dutyOption.Id === roster.DutyOptionId ? true : false">{{dutyOption.Description}}</option> 
      </select> 
      </td> 
     </template> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Answer 1

あなたが同じ値を持つすべてのselect要素に結合するためです：_selDutyOption、1を変更]を選択し、すべてが更新されます。

select要素ごとに異なるモデルを定義すると、問題が解決します。