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

Question

我正在使用 angluar2 和 TypeScript 创建一个表。我不知道如何制作 <select>在每个<td>同排<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 元素绑定(bind)为相同的值:_selDutyOption，当一个选择更改时，所有将更新。

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