AngularJS - 更新ng-if中的一个元素会导致所有元素都得到更新

Question

我正在使用angluar2和TypeScript创建一个表。我不知道如何使同一行的每个<td>中的<select> <tr>独立。 我的代码允许用户从任何列中选择一个选项。 用户选择一个选项后，同一行中的所有列都将更新。

<!--
    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，当一个选择更改时，所有元素都将更新。

为每个select元素定义不同的模型将解决您的问题。