Mat-Select 显示对象属性，即来自先前选择/保存的值的 customer.name答案

【问题标题】：Mat-Select Display Object Property i.e. customer.name from Previously Selected/Saved ValueMat-Select 显示对象属性，即来自先前选择/保存的值的 customer.name
【发布时间】：2018-12-05 15:18:25
【问题描述】：

我在 Angular 6 项目中处理 mat-select 和选项。

我的用例如下：

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

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

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

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

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

<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>

【问题讨论】：

标签： angular angular-material angular-reactive-forms

【解决方案1】：

最后解决方法很简单，我在这篇帖子Angular Material: mat-select not selecting default找到的

基本上我只是使用占位符，订单是用于填充表单的底层对象，客户只是表单上的属性之一：

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

【讨论】：