数据列表在 Angular 中动态填充的对象不返回选定的对象值

如何解决数据列表在 Angular 中动态填充的对象不返回选定的对象值

我有一个根据您输入的内容自动完成的输入文本字段。建议来自一项服务，该服务将您的小费与对象数组进行比较，特别是与对象的名称属性进行比较。

使用该比较的结果，它返回一个匹配对象数组，我将这些对象添加到 dalist 选项中，因此自动完成选项会随着您键入而改变。

此时相当有效，当您输入输入字段时显示建议，但是当您选择一个时，我只是从您选择的选项中获取名称属性，而不是对象（我不知道我是否解释得很好).

所有这些的目的是使用选择的选项和另外两个下拉选择来执行对另一个服务的请求。

要跟踪输入文本字段或下拉列表的任何更改，我将所有内容都转换为响应式形式。因此，每次用户更改表单上的任何值时，我都会执行请求并更新结果。

这是控制器端：

formGroup: FormGroup;
  cities: City [];

  selectedCity: City;

  cars;


  createForm(): FormGroup {
    return this.fb.group({
      search: '',city: '',distance: '3000',sorting: 'price'
    });
  }

  async searchCities(search){
    console.log(search);
    console.log(search.search)
    this.cities = await this.citySearch.searchCities(search.search).pipe(first()).toPromise();
    if(search.city != ''){
      this.searchCars(search.city,search.distance,search.sorting)
    }
  }

  async searchCars(city,distance,sort){
    this.cars = await this.carSearch.getAvailableCars$(city,sort).pipe(first()).toPromise(); 
  }

  ngOnInit(): void {
    this.formGroup = this.createForm();

   this.formGroup.valueChanges.pipe(
     debounceTime(500),switchMap(data => this.searchCities(data))
   ).subscribe();

  }

这是视图，此时为了继续工作，我使用自动完成结果填充下拉列表，从中选择结果，以便我可以测试整个组件。除了数据列表问题之外，一切正常。这是视图代码：

<form [formGroup]="formGroup">
  <h2>City Search</h2>
  <input type="text" formControlName="search" list='cityList'/>

  <datalist id='cityList'>
    <option *ngFor='let city of cities' [ngValue]='city'>{{ city.name }}</option>
  </datalist>

  <select formControlName="city">
    <option *ngFor="let city of cities" [ngValue]=city>
      {{ city.name }}
    </option>
  </select>

  <h2>distance Search</h2>
  <select formControlName="distance">
    <option value="3000" selected>3 km</option>
    <option value="5000">5 km</option>
    <option value="7000">7 km</option>
  </select>

  <h2>Sorting</h2>
  <select formControlName="sorting">
    <option value="price">price</option>
    <option value="recommended" selected>recommended</option>
    <option value="distance">distance</option>
  </select>
</form>