Question

我有一个包含数千个选项（城市名称）的选择标记，用户可以选择它作为出生城市，并由服务提供。服务文件

getAllCities () {
return this.httpClient.get<City[]>(this.API_URL + 'cities');
}

在html组件文件中：

<select
       class="form-control"
       id="city"
       name="city"
       ngModel
>
     <option disabled selected value=""> Select city</option>
     <option *ngFor="let elt of cities" [ngValue]="elt.code_city">
                {{ elt.city_name }}
     </option>
</select>

在component.ts文件中

getCities(){
this.shareService.getAllCities()
  .subscribe(
    (response: Array<City>) => {
      console.log(response);
      this.cities = response;
    },
    (error) => console.log('Error getting cities: ' + error)
  );
}

问题是我的应用程序块？并且不加载城市，你知道如何在角度4中做到这一点（我必须采取哪种方法来防止这种行为）感谢

Answer 1

我建议在这种情况下使用AutoComplete输入。

您可以使用NgPrime提供的角色应用程序。

这很容易使用。

https://www.primefaces.org/primeng/#/autocomplete

Answer 2

限制数据绑定到DOM。将过多的数据绑定到单个DOM可能会阻止您的应用程序，并且您的用户可能需要滚动太多才能搜索他的城市。使用select with search（ng-select）并使用limitTo pipe进行有限的数据绑定。

在Angular 4中的select标记中加载大数据

2 个答案: