数据来自API，但不显示。 Angular9个ABP框架

Question

我想在我的 select 控件中填充数据，该控件位于 header child 组件中，但数据来自 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. 使用布尔值和 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>