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

Question

我正在尝试将Firestore中的ID数组的值修补为具有多个选项的无垫选择。我正在遍历数组并为每个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

我只会在垫子选择中使用简单的formControl而不是formArray。 formControl保存选择数组，您可以使用formControlName。

 <mat-form-field appearance="outline">
      <mat-select [formControlName]="'property_ids'" multiple>
        <mat-option *ngFor="let property of properties; let i = index" [value]="property.property_id" 
                    (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>

您还需要在mat选项中绑定值以使选择正常工作。