Angular 8 Выбрать с помощью [(ngModel)] устанавливает значение, но текст не отображается в опции

Question

короче, у меня есть интерфейс для клиента:

ClientInterface{
    id:number;
    displayName: string;
}

Затем в компоненте у меня есть массив клиентов и один выбранный клиент:

public clients: ClientInterface[];
public selectedClient: ClientInterface = null;

Во время Данные ngOnInit извлекаются из вызова api в PHP через преобразователь, который возвращает объект selectedClient, соответствующий интерфейсу, затем назначает его selectedClient:

ngOnInit() {

    // data is taken from the resolver here

    // and assigned here
    this.selectedClient = <ClientInterface>data.selectedClient;
  }

В представлении есть раскрывающийся список:

<select name="client" id="client" class="form-control" [(ngModel)]="selectedClient">
                        <option *ngFor="let client of clients" [ngValue]="client">{{ client.displayName }}</option>
                    </select>

Кажется, не выбирается опция ?? Однако это работает по-другому: если я выберу вариант из раскрывающегося списка, this.selectedClient будет иметь правильного клиента в объекте.

Answer 1

Angular по умолчанию использует идентификатор объекта для выбора параметров, но в некоторых сценариях ios могут быть расхождения, когда значения объекта остаются такими же, но идентичность объекта изменяется. Для обработки такого сценария ios, angular предоставляет compareWith input

compareWith принимает функцию, которая имеет два аргумента: option1 и option2. Если задано compareWith, Angular выбирает вариант по возвращаемому значению функции.

Попробуйте следующее:

компонент. html

<select  [compareWith]="compareFn" name="client" id="client" class="form-control" [(ngModel)]="selectedClient">
          <option *ngFor="let client of clients" [ngValue]="client">{{ client.displayName }}</option>
  </select>

component.ts

compareFn(c1: any, c2: any): boolean {
    return c1 && c2 ? c1.selectedClient === c2.selectedClient : c1 === c2;
}