我在填充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,如下所示。
因此,当我使用FormArray时,无法绑定到模板。我真的很难确定应该做些什么。我目前正在通过Stackoverflow寻找答案,但是如果有人可以解释我哪里出了问题以及应该如何解决我的问题,我将非常感激。如果我对这个问题的措词不好,请发表评论,我将进行重写和澄清。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'”
**更新**
我开始认为问题不在于芯片清单,而是companies: new FormControl(this.user.tags.company)
可能未正确初始化的事实,例如,这可能是设置值或选择垫子的问题使用formControlName
而不是ngModal
的多个值?
我在填充芯片列表时遇到问题。在模态窗口中包含的角度分量中,我使用MAT_DIALOG_DATA传递数据。看起来像这样:{名称:'string',电子邮件:'...
如果要遍历HTML中的表单数组,则首先需要指定formArrayName