时间戳

首页 > 解决方案 > Angular 2 - 加载元素后填充选择的选项

angular - Angular 2 - 加载元素后填充选择的选项

问题描述

我在 component.html 中有一个元素：

<select name="select1">
    <option *ngFor="let option of optionsArr">{{option}}</option>
</select>

在 component.ts 中，我从 Excel 中填充 optionsArr：

export class ComponentX implements OnInit {
optionsArr = [];

constructor(private service : ServiceX) { 
}

ngOnInit() { 
   this.service.getJSON(filepath).subscribe((jsonObj:any)=> {
        for (var x in jsonObject){
            this.optionsArr.push(x);
        }
   });
}

在 service.ts

export class ServiceX {
   constructor() {}
   getJSON(filepath){
      return Observable.create((observer:any) =>{
          //retrieve JSON here
          observer.next(jsonObj);
          observer.complete();
      });
   }
}

但是点击下拉菜单，什么也没有出现。我猜在填充 optionsArr 之前已经加载了视图。所以我的问题是，有没有办法解决这个问题？

标签： angularselectoptions

解决方案

假设您的服务调用是正常的同步调用，您无需担心视图或数组首先被初始化。如果变量发生变化，Angular 会重绘视图。如果您的调用是异步的，请将其绑定到可观察对象并在您的视图中使用异步管道（请参阅文档）。

例子：

<select name="select1" *ngIf="optionsArr | async as options">
    <option *ngFor="let option of options">{{option}}</option>
</select>

您不需要订阅 observable，而是将其绑定为您的选项数组：

optionsArr: Observable<string[]> // Assuming the array is of type string

ngOnInit(){
  this.optionsArr = this.service.getJSON(filepath) as Observable<string[]>;
}

推荐阅读