Question

我想从后面检索对象“ listOfArticles ”的列表以进行调用用于初始化表单并在此列表上使用验证器的next方法。但是在我的情况下，表单是在http请求结束之前初始化的（由于异步方法）。如何解决？

管理方法Arbo.service.ts ：

constructor(private http: Http) { }

  getProducts(parametres :string) :Observable<any> {
    console.log("Dans getProducts avec "+parametres);
    let url :string = "http://#####"+parametres;
    let observable :Observable<any> = this.http.get(url).map((res:Response) => res.json());
    return observable;
 }

myForm.ts的

ngOnInit（）方法

ngOnInit() {
    this.getListBdd();
    this.myFormGroup = this.fb.group({
      itemRows: this.fb.array([this.initItemRows()])
    })
}

myForm.ts的

getListBdd（）方法

public getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { this.listOfArticles = res; console.log('bdd:' + res); }

          ,
          err => console.log(err),
          () => console.log('getProducts done'));
    });
}

Answer 1

将所有表单初始化代码移动到getListBdd()的订阅中

public getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { 
           this.listOfArticles = res; console.log('bdd:' + res); 

           // create your form here;
           this.myFormGroup = this.fb.group({
                    itemRows: this.fb.array([this.initItemRows()])
            })
         },
          err => console.log(err),
          () => console.log('getProducts done'));
    });
}

角度4：等待http请求结束以初始化表单

1 个答案: