在Angular（v4）中將* ngFor的索引添加到[（ngModel）]

我正在使用ngFor遍歷數組，並且需要將索引綁定到ngModel，以便每個輸入對都有一個單獨的ID，不懂我如何通過這在Angular（v4）中將* ngFor的索引添加到[（ngModel）]

這是plnkr：http://plnkr.co/edit/Q8NfhTL25Y8gOoGMXiP2?p=preview

下面是我當前的代碼：

<div class="container"> 
    <div *ngFor="let question of questions; let i = index" class="row container-generic"> 
     <div class="col-md-8"> 
     <div class="container-input-checkbox"> 
      <label class="container-flex"> 
      <input class="pvq-create-checkbox" type="checkbox" name="" value="" [(ngModel)]="needsUniqueID"> 
      <div class="pvq-create-label"> 
       <p>{{ question }}</p> 
      </div> 
      </label> 
      <label [@hideShow]="needsUniqueID ? 'active' : 'inactive'">Answer 
      <input type="textbox" name=""> 
      </label> 
     </div> 
     </div> 
    </div> 
    </div>

來源

2017-05-28 Dachan

你爲什麼需要雙向綁定？你不能單向傳遞嗎？像這樣'[uniqueID] =「我」' – Tom

你想完成什麼，從你的代碼中不清楚？ –

@JayakrishnanGounder我想回答輸入只顯示在被檢查的問題旁邊。 – Dachan

我會使用模板引用變量（索引）的這而不是雙向綁定並將inactive和active更改爲false和true的動畫。所以，你的輸入是這樣的：

<input type="checkbox" name="{{i}}" #name="ngModel" ngModel>

使得現在唯一name.value（基於索引）的基礎上的複選框的狀態是true或false。

因此改變[@hideShow]到：

<label [@hideShow]="name.value ? 'true' : 'false'">Answer 
    <input type="textbox" name=""> 
</label>

，並在組件，用false和active與true取代inactive，你會得到你想要的結果:)

這裏是你的分叉PLUNKER。

來源

2017-05-28 08:36:38 Alex

好的答案。請問，你能否解釋爲什麼由於'ngFor'循環而創建的其他實例沒有綁定到ngModel，因爲它們在原始示例中？我讀過https://angular.io/docs/ts /latest/guide/forms.html#！＃show-and-hide-validation-error-messages 5次，它不會在我的腦海中點擊。 – Tom

@Tom如果這是一種形式，你可以這樣想。我們用'ngModel'綁定的每個'name'屬性都是唯一的（即索引）。可以看出，如果我們將其轉換爲表單：http://plnkr.co/edit/0F1o3TJGXAeeA8aM0Jhd?p=preview你可以看到每個'name'都有索引值:) – Alex

明白了。謝謝！ – Tom

您應該使用陣列集合的。

修改您的JSON有以下結構，

questions = [{ title :"What is your name?", needsUniqueID:'inactive'}, 
      {title:"What was your first pet's name?",needsUniqueID:'inactive' }, 
      {title :"Where were you born?" ,needsUniqueID:'active'}]

HTML將作爲

<div *ngFor="let question of questions; let i = index" class="row container-generic"> 
     <div class="col-md-8"> 
     <div class="container-input-checkbox"> 
      <label class="container-flex"> 
      <input class="pvq-create-checkbox" type="checkbox" name="" value="" [(ngModel)]="question.needsUniqueID"> 
      <div class="pvq-create-label"> 
       <p>{{question.title}}</p> 
      </div> 
      </label> 
      <label [@hideShow]="question.needsUniqueID ? 'active' : 'inactive'">Answer 
      <input type="textbox" name=""> 
      </label> 
     </div> 
     </div> 
    </div>

LIVE DEMO

來源

2017-05-28 06:44:21 Aravind

這實際上是最好的解決方案嗎？它看起來很鈍 – Dachan

是的，這將是最好的解決方案之一，你不能處理使用單個對象，因爲他們將有相同的實例。 – Aravind

創建一個子組件，以便檢查它的狀態是否存儲在組件的實例中，如Plunkr所示。

子組件看起來是這樣的：

@Component({ 
    selector: 'question', 
    styles: [ 
    '.pvq-create-label { display: inline-block }, container-flex{ clear: both; }' 
    ], 
    template: ` 
<div class="col-md-8"> 
    <div class="container-input-checkbox"> 
    <label class="container-flex"> 
     <input class="pvq-create-checkbox" type="checkbox" name="" value="" [(ngModel)]="checked"> 
     <div class="pvq-create-label"> 
     <p>{{ question }}</p> 
     </div> 
    </label> 
    <label [@hideShow]="checked ? 'active' : 'inactive'">Answer 
     <input type="textbox" name=""> 
    </label> 
    </div> 
</div> 
    `, 
    animations: [ 
    trigger('hideShow', [ 
     state('inactive', style({ 
     opacity: 0, 
     height: 0 
     })), 
     state('active', style({ 
     opacity: 1, 
     height: '*' 
     })), 
     transition('inactive => active', animate('150ms ease-in')), 
     transition('active => inactive', animate('150ms ease-out')) 
    ]) 
    ] 
}) 
export class QuestionComponent { 
    public checked: boolean 
    @Input() question: string 
}

來源

2017-05-28 08:46:29 Tom

在Angular（v4）中將* ngFor的索引添加到[（ngModel）]

回答

相關問題