Question

我正在尝试循环动态值以在表单上创建单选按钮项。我设法显示了来自数据的三个单选按钮：

radiot: [
        {
          section: "yes",
          sectionCode: "1"
        },
        {
          section: "no",
          sectionCode: "2"
        },
        {
          section: "maybe",
          sectionCode: "3"
        }
      ]

问题是我无法显示“节”的选项。

例如

<div class="form-check-inline" *ngFor="let item of personal.radioButtons.radiot; let i = index">

    <label for="yes" class="col-12 customradio"
        ><span>{{item[i].section}}</span>
        <input value="{{item[i].section}}" id="{{item[i]}}" type="radio" [formControlName]="i"/>
        <span class="checkmark"></span>
    </label>
</div>

我在做什么错？收到错误-Cannot read property 'section' of undefined

StackBlitz示例

Answer 1

您无需在* ng中使用i，因为您已经在该位置引用了该对象。

因此，对于第一次迭代，您的item将是

{
          section: "yes",
          sectionCode: "1"
}

因此您只需执行item.section-无需索引位置。

<span>{{item.section}}</span>

Answer 2

将模板从 [formControlName] 更改为 formControlName

        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input value="{{item.section}}" name="formGroupName" id="{{item.section}}" type="radio" formControlName="radiot"/>
            <span class="checkmark"></span>
        </label>

目前，您正在告诉angular寻找未定义的变量收音机，但它需要的是字符串，以便它可以查找作为当前表单对象的属性

Answer 3

您应该放置=而不是:

radiot = [
  {
    section: "yes",
    sectionCode: "1"
  },
  {
    section: "no",
    sectionCode: "2"
  },
  {
    section: "maybe",
    sectionCode: "3"
  }
];

角反应形式* ngFor循环，无法读取未定义的“属性”

3 个答案: