数据来自 API，但不显示。 Angular 9 ABP 框架

Posted 2023-02-15

【中文标题】数据来自 API，但不显示。 Angular 9 ABP 框架

【英文标题】：Data come from API, but does not display. Angular 9 ABP framework

【发布时间】：2021-03-15 05:58:08

【问题描述】：

我想在我的选择控件中填充数据，该控件位于标题子组件中，但数据来自 API，但不显示。

.

  ngOnInit() 
    this._assingedSiteService.getAssignedSitesForLogInUser().subscribe(
      (res) => 
        this.sites = res;
        console.log(this.sites);
      ,

      (error) => 
        console.log(error);
      
    );
  

<li class="nav-item">
  <select class="form-control">
    <option *ngFor="let site of sites">
      site.siteName | json
    </option>
  </select>
</li>

【参考方案1】：

在渲染页面之前，您需要等待接收到的数据。你可以做两件事：

使用布尔值和ngIf 指令：

 loadingData = true;
 ngOnInit() 
     this._assingedSiteService.getAssignedSitesForLogInUser().subscribe((res) => 
         this.sites = res;
         console.log(this.sites);
         this.loadingData = false;
       , (error) => 
         console.log(error);
       
     );
 

模板

   <select class="form-control" *ngIf="!loadingData">
     <option *ngFor="let site of sites">
       site.siteName | json
     </option>
   </select>

我更喜欢，如果您的订阅中没有逻辑，请在模板中使用 async 管道：

 sites$: Observable<Site>;

 ngOnInit() 
    this.sites$ = this._assingedSiteService.getAssignedSitesForLogInUser();
 

模板：

   <select class="form-control">
     <option *ngFor="let site of sites$ | async">
       site.siteName | json
     </option>
   </select>