Angular 2 - 在加载元素后填充 select 的选项

Question

我在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 之前已经加载了视图。所以我的问题是，有没有办法解决这个问题？

Answer 1

假设你的服务调用是一个普通的同步调用，你不需要担心视图或者数组先被初始化。 Angular 如果变量改变则重新绘制视图。如果您的调用是异步的，请将其绑定到一个可观察对象并在您的视图中使用异步管道 (See docs)。

示例：

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

您无需订阅可观察对象，而是将其绑定为您的选项数组：

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

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

Answer 2

通常你会这样做

ngOnInit(){
   this.service.yourServiceCallThatReturnsObservable().subscribe(options=>{
       for (var x in options){
        this.optionsArr.push(x);
       } 
   }
}

但那是假设您正在进行 returns Observable<Someting>

的服务调用

在同步调用的情况下，它应该会像您介绍的那样工作。

Answer 3

里面component.ts

public optionsArr: any;


ngOnInit() { 
   this.service.getJSON(filepath).subscribe(
    (jsonObj:any)=> {
        this.optionsArry = jsonObj.options;
        //SEE THE RESULT IN CONSOLE
        console.log(this.optionsArry)
   });
}

在service.ts

export class ServiceX {
   constructor() {}
   public getJSON(filepath): Observable<any> {
         return this.http.get(filepath)
                         .map((res:any) => //retrieve JSON here)
                         .catch((error:any) => console.log(error));
     });
   }
}

Angular 2 - 在加载元素后填充 select 的选项

Angular 2 - Populate select's option after element has been loaded

select

options

angular