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/

相关文章:

node.js - 如何找到任何版本 Node 的最新 Typescript 目标支持?

javascript - 如何排除 TypeScript 定义中声明的全局类型?

javascript - XMLHttpRequest无法加载XXX No'Access-Control-Allow-Origin' header

javascript - canvasjs 设置容器元素宽度时出现 recursionCount 错误

JavaScript 语法结构

javascript - 必须为 RC4 中的每个服务使用 provide()

Angular:如何在随后的 Observable 中使用 `.subscribe()` 的结果

JavaScript 简单的 "error-handling"通过用条件替换 NaN

html - ionic2 谷歌地图街景在任何 iPhone 设备上运行时不加载图像

javascript - 在 React + TypeScript 中将函数从容器传递到功能组件