无法将变量从外部 ngFor 循环分配给嵌套循环内的 ngModel

Question

我面临的问题是使用变量设置 ngModel 的变量名。详细说明：

此处用作 'options' 的 json 是：

{
  "a": [
    "a1",
    "a2",
    "a3"
  ],
  "b": [
    "b1",
    "b2",
    "b3",
    "b4"
  ],
  "c": [
    "c1",
    "c2",
    "c3",
    "c4",
    "c5",
    "c6"
  ]
}.

数组 'keys' 由 {"a"、"b"、"c"} 组成，并已使用 -[=27 在组件 class 中创建=] this.keys = Object.keys(this.options);

我在这里做的是在 html 页面上为每个键创建不同的选项卡，它们的值作为单选按钮，即选项卡是 "a"、"b" 和 "c" 并且每个选项卡都有来自选项的相应值（选项卡 a 上的 "a1, a2, a3"，选项卡 b 上的 "b1, b2, b3 and b4" 等等）作为单选按钮。它的工作到目前为止。

尝试将变量设置为键（"a"、"b" 和 "c"）的值并returning 对应的选定值时出现问题单选按钮作为每个选项卡的值。为了澄清，我想 return a = a1 or a2 or a3 , b = b1 or b2 or b3 or b4 and c= c1 or c2 or c3 or c4 or c5 or c6 （基于我的选择）。我无法将 ngModel 设置为任何相关变量来实现此目的。我可以直接将 ngModel 设置为 "a"、"b" 或 "c"，但不能使用循环变量，例如使用索引的键或访问键。此外，如果它是相关的，我将 formGroup 用于此表单。

如有任何帮助，我们将不胜感激。我不确定我是否解释得足够好，所以请随时提问。（而且我是 Angular 的新手，所以我可能错过了一些明显的东西，尽管我已经尝试解决了一段时间：/）

<div *ngFor="let key of keys">
<md-tab label="{{key}}">

  <fieldset class="fieldset">

    <legend>{{key}}</legend>

    <div class="row">

          <div *ngFor="let opt of options[key]" class="large-3 small-6 columns end">
          <input id="{{opt}}" type="radio" formControlName="{{key}}" value="{{opt}}" [(ngModel)]="key.selected" /> 
          <label for="{{opt}}"><span class="{{opt}}"></span>{{opt}}</label><br/>
        </div>
      </div>
  </fieldset>

</md-tab>

Answer 1

这是你的起点：

添加组件

public temp = {};

和html

<div *ngFor="let key of keys">
    <legend>{{key}}</legend>
    <div *ngFor="let opt of options[key]">
        <input id="{{opt}}" type="radio" [name]="key" [value]="opt" [(ngModel)]="temp[key]" />
        <label for="{{opt}}"><span class="{{opt}}"></span>{{opt}}<br/></label>
    </div>
</div>

无法将变量从外部 ngFor 循环分配给嵌套循环内的 ngModel

Unable to assign variable from outer ngFor loop to ngModel inside a nested loop

angular2-forms

angular2-ngmodel

ngfor