Angular 抱怨无法读取未定义的属性答案

【问题标题】：Angular complains cannot read property of undefinedAngular 抱怨无法读取未定义的属性
【发布时间】：2019-02-11 12:15:57
【问题描述】：

我有一个像下面这样的角度模板。

<section class="section">
      <div class="container">
        <form [formGroup]="testForm">
          <div class="columns is-multiline">
            <div class="column is-2">
              <div class="box">
                <h1 class="subtitle">Test Array</h1>
                <div formArrayName="salestest" *ngFor="let sale of salestest.controls; let i=index">
                  <div [formGroupName]="i">
                    <div class="field">
                      <label class="label">Test Sale1</label>
                      <div class="control">
                        <input class="input" type="text" placeholder="Sales" formControlName="sales">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section>

我有一个这样的组件

export class SalesTestComponent implements OnInit {
  testForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.testForm = this.fb.group({
      salestest: this.fb.array([this.buildSalesTest()])
    });
    console.log("ngOnint was called");
  }

  buildSalesTest(): FormGroup {
    return this.fb.group({
      sales: ""
    });
  }

   get salestest(): FormArray {
    return <FormArray>this.testForm.get("salestest");
  }
}

当我构建并运行它时，我得到一个错误提示

错误类型错误：无法读取未定义的属性“值”

模板中的第3行是

<form [formGroup]="testForm">

我不确定为什么 Angular 抱怨无法读取未定义的属性。

这是完整的错误信息

ERROR TypeError: Cannot read property 'value' of undefined
    at Object.eval [as updateRenderer] (CreateSalesTestComponent.html:23)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:23838)
    at checkAndUpdateView (core.js:23213)
    at callViewAction (core.js:23449)
    at execComponentViewsAction (core.js:23391)
    at checkAndUpdateView (core.js:23214)
    at callViewAction (core.js:23449)
    at execEmbeddedViewsAction (core.js:23412)
    at checkAndUpdateView (core.js:23209)
    at callViewAction (core.js:23449)

第 23 行是

ngOnInit() {
    this.testForm = this.fb.group({
      salestest: this.fb.array([this.buildSalesTest()])
    }); <!-- **Line 23** -->
    console.log("ngOnint was called");
  }

【问题讨论】：

第 3 行出现错误？
嗨，是的，它在第 3 行出现错误，即模板中的
并且错误消息是无法读取未定义的属性“值”
你能发布整个错误信息吗？我试过你的代码，它工作正常
你能发布所有CreateSalesTestComponent.html文件吗？
错误来自您的 html 文件而不是 ts。您甚至可以在控制台中单击该错误，它会将您带到发生错误的地方

标签： javascript angular typescript

【解决方案1】：

下面一行是错误的。

<div [formGroupName]="i">

改成

<div [formGroup]="sale">

您正在为 formGroupName 分配索引。这就是为什么您的表单属性在其中找不到组及其控件的原因。这是Working Example

如果有问题请告诉我，我很乐意提供帮助。

【讨论】：