Question

我想将select用于两种不同的方式：

首先（对象存在）->我要在选择中显示所选对象，并且希望能够更改对象

第二（对象不存在）->我要选择一个对象

这是对象的代码：

export class Brand {
    brandId: number;
    name: string;

    constructor() {}
}

我需要执行以下操作（1），以便在使用ngModel的选择中显示所选的品牌，并且ngModel正确（我将使用以下代码对其进行解释）

此代码将为我提供正确的品牌对象（带有brandId和名称），但不会向我显示选择中当前选择的品牌

<div class="from-group">
        <label>Marke</label>
        <select name="brand" [(ngModel)]="phone.brand" class="browser-default custom-select" (selectionChange)="brandChanged($event)">
          <option *ngFor="let brand of allBrands" [ngValue]="brand">{{brand.name}}</option>
        </select>
      </div>

此代码将给我一个不正确的品牌对象（只是名称，但没有ID），但会向我显示选择中当前选择的品牌

<div class="from-group">
      <label>Marke</label>
      <select name="brand" [(ngModel)]="phone.brand.name" class="browser-default custom-select" (selectionChange)="brandChanged($event)">
        <option *ngFor="let brand of allBrands" [value]="brand.name">{{brand.name}}</option>
      </select>
    </div>

我该如何更改代码，才能将当前选定的品牌设置为选定的品牌（如果未选择品牌，则不显示任何品牌），然后从选择中获取正确的品牌对象？

Answer 1

由于您的对象和数组中的对象没有引用，因此Angular无法为您设置值。但是您可以使用compareWith，它比较对象并在对象匹配时返回true。

<select name="brand" [(ngModel)]="phone.brand" [compareWith]="compareFn">
  <option *ngFor="let brand of allBrands" [ngValue]="brand">{{brand.name}}</option>
</select>

功能：

compareFn(b1: Brand, b2: Brand): boolean {
  return b1 && b2 ? b1.brandId === b2.brandId : b1 === b2;
}

演示： StackBlitz

如何在两种不同的情况下使用ngModel

1 个答案: