Angular-无法使用collection和* ngFor]填充mat-chip-list>

Question

我在填充mat-chip-list时遇到问题。在模态窗口中包含的角度分量中，我使用MAT_DIALOG_DATA传递数据。看起来像这样：

{
  name: 'string',
  email: 'string',
  tags: {
    company: [{displayName: 'string', id: ''}, ...] // can contain many or no items
  }
} 
我将其传递给组件，并在为组件创建FormControl时将company属性分配给FormGroup（请参见下面的代码）。然后，我使用一种方法返回FormControl值，以便可以遍历内容以生成mat-chip-list，这是我的模板代码：

<mat-select formControlName="companies" multiple class="edit-user__form__chip-select">
  <mat-select-trigger>
    <mat-chip-list>
      <mat-chip *ngFor="let company of outputChips('companies')"
                [removable]="true"
                (removed)="onChipRemove('companies', company)">
        {{ company.displayName }}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>
  </mat-select-trigger>
  <mat-option *ngFor="let company of companyList" [value]="company">{{company.displayName}}</mat-option>
</mat-select>
这是我的代码文件（我只包括相关部分）：

constructor(public dialogRef: MatDialogRef<EditAccountComponent>,
              @Inject(MAT_DIALOG_DATA) private data,
              private apiService: ApiService,
              private emailUniqueValidator: EmailUniqueValidator) {
    this.user = data;
  }

ngOnInit(): void {
    this.editAccountForm = this.createEditUserForm();
    // this returns a collection [{}, {}] where the objects have the same structure / signature
    // as the items contained with in the this.user.tags.company collection
    this.loadCompanies(); 
  }

createEditUserForm(): FormGroup {
    return new FormGroup({
      name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
      email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
      ),
      companies: new FormControl(this.user.tags.company),
      roles: new FormArray([])
    });
  }

outputChips(control): any {
    return this.editAccountForm.controls[control].value;
  }

loadCompanies(): void {
    this.apiService.getTags('company', '').subscribe(tags => this.companyList = tags.slice(0, 20));
  }
现在我的问题是mat-chip-list没有被填充，但是如果我将相同的代码（*ngFor）与<div>一起使用，它将输出正确的数据。我确定这可能是因为我正在使用FormControl来定义FormGroup的公司属性/控件。所以我将其更改为FormArray并将this.user.tags.company格式化为FormArray，如下所示。
createEditUserForm(): FormGroup {
    let formComps: FormArray;

    if (this.user.tags && this.user.tags.company) {
      formComps = new FormArray([...this.user.tags.company.map(item => new FormControl(item))]);
    }

    return new FormGroup({
      name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
      email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
      ),
      companies: new FormArray(formComps),
      roles: new FormArray([])
    });
  }
但是这会产生错误“ EditAccountComponent.html：38错误TypeError：无法读取未定义的属性'controls'”
因此，当我使用FormArray时，无法绑定到模板。我真的很难确定应该做些什么。我目前正在通过Stackoverflow寻找答案，但是如果有人可以解释我哪里出了问题以及应该如何解决我的问题，我将非常感激。如果我对这个问题的措词不好，请发表评论，我将进行重写和澄清。

我在填充芯片列表时遇到问题。在模态窗口中包含的角度分量中，我使用MAT_DIALOG_DATA传递数据。看起来像这样：{名称：'string'，电子邮件：'...

Answer 1

如果要遍历HTML中的表单数组，则首先需要指定formArrayName

，然后遍历所有控件。就您而言，它看起来应该差不多。