ngДля выдачи ошибки «Идентификатор не определен __type не содержит такого члена»

Question

Я реализовал подкомпонент, в котором пользователь может динамически добавлять и удалять набор элементов управления в коллекцию и из нее. Решение было основано на ответе на этот вопрос SO .

. Он компилируется и работает как чудо, но в директиве * ngFor есть раздражающее сообщение:

* 1006. *

Идентификатор «секции» не определен. '__type' не содержит такого члена. Angular

Я использую VS Code в качестве своей IDE.

Я видел подобные ошибки в директивах * ngIf исообщение исчезает, когда вы добавляете двойной восклицательный знак (!!) в начале оператора условия, но в этом случае директива использует коллекцию, а не булево значение.

Как я могу заставить это бельмо на глазу уйтипрочь?

HTML выглядит так:

<div class="row" [formGroup]="saveForm">
  <label for="sections" class="col-md-3 col-form-label">Sections:</label>

  <div class="col-md-9">
      <a class="add-link" (click)="addSection()">Add Section</a>

      <div formArrayName="sections">
        <!-- The "problem" seems to be "saveForm.controls.sections" -->
        <div *ngFor="let section of saveForm.controls.sections.controls; let i=index" [formGroupName]="i">
          <label for="from">From:</label>
          <input class="form-control" type="text" formControlName="from">
          <label for="to">To:</label>
          <input class="form-control" type="text" formControlName="to">
        </div>
      </div>

    </div>

  </div>

И это компонент:

import { FormGroup, FormBuilder, FormArray, ControlContainer } from '@angular/forms';
import { Component, OnInit, Input } from '@angular/core';
import { ISection } from '../shared/practice.model';

@Component({
  selector: '[formGroup] app-sections',
  templateUrl: './sections.component.html',
  styleUrls: ['./sections.component.scss']
})
export class SectionsComponent implements OnInit {
  @Input() sections: ISection[];
  saveForm: FormGroup;

  get sectionsArr(): FormArray {
    return this.saveForm.get('sections') as FormArray;
  }

  constructor(private formBuilder: FormBuilder, private controlContainer: ControlContainer) { }

  ngOnInit() {
    this.saveForm = this.controlContainer.control as FormGroup;
    this.saveForm.addControl('sections', this.formBuilder.array([this.initSections()]));

    this.sectionsArr.clear();

    this.sections.forEach(s => {
      this.sectionsArr.push(this.formBuilder.group({
        from: s.from,
        to: s.to
      }));
    });
  }

  initSections(): FormGroup {
    return this.formBuilder.group({
      from: [''],
      to: ['']
    });
  }

  addSection(): void {
    this.sectionsArr.push(this.initSections());
  }
}

Answer 1

Оказывается, Флориан почти понял все правильно, правильный синтаксис был бы:

<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">

Таким образом, ошибка / предупреждение исчезнет, ​​а компонент все еще будет работать, как и ожидалось.