表单数组上的补丁值未在材料多重选择上设置值

Question

我正在尝试将 Firestore 中的一组 id 值修补到具有多个选项的 mat-select 中。我循环遍历数组并为每个 id 创建一个新的表单控件，然后使用反应式表单推送方法添加到 formArray。像这样：

patchValueForm(portfolio: any) {

 this.formGroup.patchValue(portfolio);

 for (const id of portfolio.property_ids) {

   const control = new FormControl(id);

   if (!this.property_ids.getRawValue().includes(id)) {

     this.property_ids.push(control);

   }

}

console.log(this.formGroup.getRawValue()); }

这似乎将值修补到控制台日志中显示的表单中：

我遇到的问题是它没有预先填充此处显示的材料选择：

我用于这部分的 HTML 是：

 <mat-form-field appearance="outline">

          <mat-select [formArrayName]="'property_ids'" multiple>

            <mat-option *ngFor="let property of properties; let i = index" 

                        (onSelectionChange)="updatePropertyIdArray(property.property_id)" >

              {{property?.address?.first_line_address}}

            </mat-option>

          </mat-select>

          <mat-error>Please select at least one property</mat-error>

        </mat-form-field>

我在网上到处搜索并尝试了多种不同的方法，但似乎仍然无法填充选择。有谁之前经历过这个吗？

Answer 1

我只会在 mat select 中使用一个简单的 formControl 而不是 formArray。formControl 保存选择数组，您可以使用 formControlName。&nbsp;<mat-form-field appearance="outline">&nbsp; &nbsp; &nbsp; <mat-select [formControlName]="'property_ids'" multiple>&nbsp; &nbsp; &nbsp; &nbsp; <mat-option *ngFor="let property of properties; let i = index" [value]="property.property_id"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (onSelectionChange)="updatePropertyIdArray(property.property_id)" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{property?.address?.first_line_address}}&nbsp; &nbsp; &nbsp; &nbsp; </mat-option>&nbsp; &nbsp; &nbsp; </mat-select>&nbsp; &nbsp; &nbsp; <mat-error>Please select at least one property</mat-error>&nbsp; &nbsp; </mat-form-field>您还需要 mat 选项中的值绑定才能使选择正常工作。