Question

我正在使用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>

Answer 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 。

Answer 2

您应该使用集合数组。

修改你的json以具有以下结构，

"[Fabric] An exception has occured; Error writing request: The authentication or decryption has failed.
UnityEngine.Debug:LogWarning(Object)
Fabric.Internal.Editor.Utils:Warn(String, Object[]) (at Assets/Fabric/Editor/FabricUtils.cs:18)
Fabric.Internal.Editor.Controller.PluginController:OnLoginError(Exception, Action`1) (at Assets/Fabric/Editor/GUI/Controller/PluginController.cs:537)
Fabric.Internal.Editor.Controller.<Login>c__AnonStorey3A:<>m__A0(Exception) (at Assets/Fabric/Editor/GUI/Controller/PluginController.cs:564)
Fabric.Internal.Editor.Detail.<CreateCoroutine>c__Iterator4:MoveNext() (at Assets/Fabric/Editor/GUI/Detail/AsyncTaskRunner.cs:106)
Fabric.Internal.Editor.Detail.AsyncTaskRunner`1:Update() (at Assets/Fabric/Editor/GUI/Detail/AsyncTaskRunner.cs:143)
UnityEditor.EditorApplication:Internal_CallUpdateFunctions()
"

HTML将为

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'}]

<强> LIVE DEMO

Answer 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
}

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

3 个答案: