Angular 2 下拉列表未加载，因为 http 响应很慢

Question

我试图使用 angular2 服务从 http 响应加载下拉列表。

这是我的服务方法：

categories: any;
    getCategories() {
        let subscription = this.httpclient
          .get(this.server_url)
          .subscribe((data) => {
            this.categories = data;
            console.log(this.categories);
          });
      }

组件传输

categoryID: number;
constructor(public categoryservice: CategoryService) { }

  ngOnInit() {
    this.categoryservice.getCategories();
  }

而组件的html代码是：

<select data-width="20%" class="selectpicker" [(ngModel)]="categoryID">
       <option *ngFor="let category of categoryservice.categories" value= {{category.categoryId}} >{{category.categoryName}}</option>
 </select>

但由于 getCategories() 方法中的响应需要一段时间，因此下拉列表为空。如果响应来得快，列表加载正确。

当响应需要时间从服务器获取数据时，任何人都可以在这种情况下帮助我吗？回复后如何加载列表？

Answer 1

您可以将 select 包裹在另一个 div 或 ng-container 周围，然后检查数据是否存在，然后仅显示 select 选项。

喜欢

<ng-container *ngIf = "categoryservice?.categories">
<select data-width="20%" class="selectpicker" [(ngModel)]="categoryID">
       <option *ngFor="let category of categoryservice.categories" value= {{category.categoryId}} >{{category.categoryName}}</option>
 </select>
</ng-container>

Answer 2

您可以在响应带有一个简单的 *ngIf 在您的选择后呈现您的下拉列表，而在您可以呈现加载之前：

<my-loading *ngIf="!loadComplete"></my-loading>

<select *ngIf="loadComplete" data-width="20%" class="selectpicker" [(ngModel)]="categoryID">
       <option *ngFor="let category of categoryservice.categories" value= {{category.categoryId}} >{{category.categoryName}}</option>
</select>

在您的 TS 中，您只需在通话完成后将 loadComplete 设置为 true

loadComplete: boolean = false;

getCategories() {
        let subscription = this.httpclient
          .get(this.server_url)
          .subscribe((data) => {
            this.categories = data;
            this.loadComplete = true;
        }, err => {
           this.loadComplete = true;
           alert("An error occurred");
        });
}

由于您无法加快调用速度，因此您可以在调用完成之前渲染加载。希望对你有帮助