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

Question

我想在放置在标头子组件中的选择控件中填充数据，但数据来自 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

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

使用布尔值和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>