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

我正在使用angluar2和TypeScript创建一个表。我不知道如何使同一行

的每个

中的

独立。我的代码允许用户从任何列中选择一个选项。一旦用户选择一个选项，同一行中的所有列都将更新

<!--
    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>

{{hdr.DayOfMonth}
{{hdr.DayOfWeek}
{{花名册.任务选项}
{{花名册.任务选项}
{{花名册.任务选项}
{{花名册.任务选项}
{{dutyOption.Description}}

这是因为您将所有

select

元素绑定为相同的值：

\u seldutyooption

，当一个选择更改时，所有元素都将更新

---

为每个

select

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

您所说的“同一行中的每一行都是独立的”是什么意思？这听起来更像是在尝试用Angular而不是CSS做一些事情……在表的每一行中，我有多个列。每列包含一个“选择/选项”。每个“选择/选项”都应该是唯一的。当我从任何一个“选择/选项”中选择一个项目时，“选择/选项”的其余部分将得到更新。然而，这不应该发生。其余的“选择/选项”应该保留它们原来选择的值。彭尼，我想你是对的。但是，我不知道是否可以动态创建不同的模型，因为我事先不知道列数和行数。@Paul您可以创建一个数组，将index varaible添加到*ngFor表达式中，然后将array[index]与select元素绑定。或者还有另一种方法，将_selDutyOption添加到您的_名册的每个项目中，并将select元素与花名册绑定。_seldutyoptionby ngModel。我通过在花名册类[ngModel]=“花名册.SelValue”中添加一个附加字段来实现选项2。“选择/选项”中所有列的显示现在都正确。但是，它带来了一个新问题，即已选择新项目的列将从显示中删除。所有列从右移到左。我在花名册类[ngModel]=“花名册.SelValue”中添加了一个额外的字段。“选择/选项”中所有列的显示现在都正确。谢谢。但是，它带来了一个新问题，即“获取新值”列将从显示中删除。所有的Col从右向左移动。我注意到[ngModel]=“花名册.SelValue”和[（ngModel）]=“花名册.SelValue”会导致编辑列被删除，所有列从右向左移动并触发（ngModelChange）。（ngModel）=“花名册.SelValue”不会删除当前列，也不会触发（ngModelChange）。当前修改“选择/选项”列的问题消失是由于UpdateUserRequest函数中的“花名册”（ngModelChange）=“UpdateUserRequest（$event，花名册）”正在修改。将花名册的值复制到一个新的花名册（）对象，然后在UpdateUserRequest（$event，花名册）中修改新的花名册对象将解决此问题。谢谢彭妮的帮助。