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

Question

我想在位于 header 子组件中的选择控件中填充数据，但数据来自 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>

Answer 1

渲染页面之前需要等待接收到数据。你可以做两件事:

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>