Question

在Angular 6项目中，我正在努力使用mat-select和options。

我的用例如下：

我要下拉组织列表并保存所选组织（完整对象，而不仅仅是名称）

formControlName应该是一个对象，因为我想在保存时使用其所有属性存储完整的对象-工作
选项被填充为带有完整对象的可观察对象，但仅显示名称属性-工作
在加载表单时，我想显示先前选择的组织名称。 -不工作

一切正常，除了它显示空白值，即选项显示所有组织，当我选择并组织并保存完整的组织对象时，但是当我第一次加载表单时，我希望它显示以前的组织名称选择并保存。

我似乎可以找到的所有帖子都只是使用简单的属性而不是对象。

请参阅下面的代码（希望如此）。任何建议/指导表示赞赏

<div [formGroup]="orderForm"> 
      <mat-form-field>
          <mat-label>Select Customer</mat-label>
          <mat-select formControlName="customer">
               <mat-option *ngFor="let organization of (organizations$| async)"
                   [value]="organization">
                       {{ organization.name }}
               </mat-option>
          </mat-select>
       </mat-form-field>
</div>

Answer 1

最后，解决方案非常简单，我在这篇帖子Angular Material: mat-select not selecting default

中发现了这一点。

基本上，我只是使用了占位符，order是用于填充表单的基础对象，而customer只是表单上的属性之一：

<mat-select formControlName="customer" [placeholder]="order.customer['name']">
   <mat-option *ngFor="let organization of (organizations$| async)"
       [value]="organization">
           {{ organization.name }}
    </mat-option>
</mat-select>

材质选择显示对象属性，即先前选择/保存的值中的customer.name

1 个答案: