在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）]

回答

相关问题