ngModel 不显示 mat-select 中对象的值

Question

我有一家公司class，它有一个总部地址字段。地址是一个接口，它有另一个对象，国家，这是另一个接口。在我的数据库中，我存储了所有国家。我有一个编辑 selected 公司的视图，在那里我可以设置或更改总部的地址，我为国家/地区创建了一个 mat-select：

<mat-select [(ngModel)]="company.headquarter.country">
    <mat-option *ngFor="let country of companyService.countries" [value]="country">
        {{country.name}}
    </mat-option>
</mat-select>

此代码将 selected 国家保存到总部的国家字段，但如果我想编辑同一家公司，mat-select 不会显示实际值。我该如何解决这个问题？

已编辑：

如果我将 ngModel 更改为 company.headquarter.country.id 并将 [value] 更改为 country.id，那么它工作正常，但是要存储国家代码或名称，我必须编写一个方法，它将通过 companyService.countries 数组中的 id 找到国家并将该国家设置为 company.headquarter.country 的字段。所以这不是一个好的解决方案。

Answer 1

将 [(ngModel)] 更改为 [(value)]。

<mat-select [(value)]="company.headquarter.country"> 
  <mat-option *ngFor="let country of companyService.countries" [value]="country"> {{country.name}}
   </mat-option>
</mat-select>

Answer 2

This code save the selected country to the headquarter's country field, but if I want to edit the same company the mat-select doesn't display the actual value. how can I solve this problem?

问题是当您 mat-select 比较两个对象时，它们的引用可能不同。使用 compare function 通过 id.

等标记比较您的对象

To customize the default option comparison algorithm, supports compareWith input. compareWith takes a function which has two arguments: option1 and option2. If compareWith is given, Angular selects option by the return value of the function.

模板：

 <mat-form-field>
              <mat-select [(value)]="contract.company"
                          panelClass="example-panel-dark-blue"
                          [compareWith]="helper.compareById">

                <mat-option *ngFor="let cust of customers"
                            [value]="cust"> {{cust.title}}
                </mat-option>
              </mat-select>
  </mat-form-field>

代码:

 compareById(f1: Common.Item, f2: Common.Item): boolean {
     return f1 && f2 && f1.id === f2.id;
 }

Official Doc

ngModel 不显示 mat-select 中对象的值

ngModel doesn't display the value of an object in mat-select

angular2-forms

angular

angular4-forms

angular5