我想在位于 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>
最佳答案
渲染页面之前需要等待接收到数据。你可以做两件事:
使用 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>
我更喜欢,如果您的订阅中没有逻辑,请在您的模板中使用
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/