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);
       } 
   }
}

但是假设您正在拨打返回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的选项

3 个答案: