javascript - 数据来自API,但不显示。 Angular 9 ABP 框架

标签 javascript angular typescript asp.net-core abp

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

Enter image description here .

  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. 使用 bool 值和 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>
    
  2. 我更喜欢,如果您的订阅中没有逻辑,请在您的模板中使用 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>
    

关于javascript - 数据来自API,但不显示。 Angular 9 ABP 框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65122251/

相关文章:

javascript - JS - 深度 map 功能

javascript - 整数数组比较

angular - 模块 'LoginPage' 导入了意外指令 'AppModule'。请添加@NgModule 注解

angular - 使用复选框删除多行

javascript - 用于验证字符串格式的正则表达式 <whole-number>@<whole-number>

javascript - 使用 redux saga 时出错,take(patternOrChannel) : argument 8 is not valid channel or a valid pattern

javascript - PhantomJS 未返回任何结果

javascript - 数组上的过滤方法无法正常工作

html - 使用 Angular 2 以模态重置表单

javascript - 如何使用 Visual Studio(如 IE)在 Chrome 中获得完整的 JavaScript/TypeScript 调试