AngularJS - 在ng中更新一個元素if會導致所有元素得到更新

我使用angluar2和TypeScript來創建表格。我無法弄清楚如何使同一行<tr>的每個<td>中的<select>獨立。我的代碼將允許用戶從任何列中選擇一個選項。一旦用戶選擇一個選項，同一行中的所有列都將被更新。AngularJS - 在ng中更新一個元素if會導致所有元素得到更新

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

來源

2017-03-24 Paul

你是什麼意思是「*每個同行是獨立*」？這聽起來更像是你正在嘗試在Angular中而不是在CSS中做些什麼...... –

在表格的每一行中，我有多個列。每列包含一個「選擇/選項」。每個「選擇/選項」應該是獨一無二的。當我從任何一個「選擇/選項」中選擇一個項目時，「選擇/選項」的其餘部分將被更新。但是，它不應該發生。其餘的「選擇/選項」應保持其原始選定值。 – Paul

這是因爲你綁定的所有元素select以相同的值：_selDutyOption，當一個人選擇在變，一切都將更新。

爲每個select元素定義不同的模型將解決您的問題。

來源

2017-03-24 03:35:32 Pengyy

Pengyy，我認爲你是對的。但是，我不知道我可以動態地創建不同的模型，因爲我不知道沒有。提前列和行。 – Paul

@Paul你可以創建一個數組，然後將可變的索引添加到* ngFor表達式，然後將array [index]綁定到select元素。或者有另外一種方法是將_selDutyOption添加到您的_rosters的每個項目中，並通過ngModel將選擇元素與roster._selDutyOption綁定。 – Pengyy

我通過在名冊類[ngModel] =「roster.SelValue」中添加一個附加字段來實現選項2。現在，所有列的「選擇/選項」中的顯示都是正確的。但是，它提出了一個新問題，即選擇新項目的列從顯示中刪除。其右側的所有列都移動到左側。 – Paul

AngularJS - 在ng中更新一個元素if會導致所有元素得到更新

回答

相關問題