在 Angular (v4) 中将索引从 *ngFor 添加到 [(ngModel)]答案

【问题标题】：Adding index from *ngFor to [(ngModel)] in Angular (v4)在 Angular (v4) 中将索引从 *ngFor 添加到 [(ngModel)]
【发布时间】：2017-10-28 16:49:03
【问题描述】：

我正在使用 ngFor 来遍历一个数组，我需要将索引绑定到 ngModel，以便每个输入对都有一个单独的 ID，但我不明白我是如何传递这个的。

它在 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>

【问题讨论】：

为什么需要双向绑定？你不能单向通过吗？像这样[uniqueID]="i"
你要完成什么，从你的代码中看不清楚？
@JayakrishnanGounder 我希望答案输入仅出现在选中的问题旁边。
@tom 我会用 [uniqueID]="i" 和 [@hideShow]="needsUniqueID 替换 "[(ngModel)]="needsUniqueID" 吗？ '活动' : '不活动'" 带有 [@hideShow]="uniqueID ? “活跃”：“不活跃””？

标签： angular

【解决方案1】：

我会为此使用模板引用变量（带索引）而不是双向绑定，并将动画的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>

在组件中，将inactive 替换为false，将active 替换为true，您将获得所需的结果:)

这是你的分叉 PLUNKER。

【讨论】：

很好的答案。请您解释一下为什么由于ngFor 循环而创建的其他实例不像原始示例中那样也绑定到ngModel？我已经阅读了angular.io/docs/ts/latest/guide/… 5 次，但它并没有在我的脑海中点击。
@Tom 你可以把它想象成一个表单......我们与ngModel 绑定的每个name 属性都是唯一的（作为索引）。可以看出，如果我们把它转换成一个形式：plnkr.co/edit/0F1o3TJGXAeeA8aM0Jhd?p=preview 可以看到每个name都有索引值:)
知道了。谢谢！
@AJT_82 谢谢！ 'name="{{i}}" #name="ngModel" ngModel' 是否等同于 Angular 不允许的 '[(ngModel)]={{i}}'？

【解决方案2】：

您应该使用集合数组。

修改您的 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

【讨论】：

这实际上是最好的解决方案吗？看起来很钝。
是的。这将是最好的解决方案之一。您无法使用单个对象处理，因为它们将具有相同的实例。

【解决方案3】：

创建一个子组件，以便将是否检查的状态存储在组件的实例中，如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
}

【讨论】：