小编pep*_*ell的帖子

Angular:在异步调用和 AsyncPipe 后创建动态反应表单

我执行异步服务调用来获取元素列表。

 public elementList: Array<Element>;
   ... 
   this.service.getElementList().subscribe( list => {
       this.elementList = list;
       this.createFormGroup(list);
     }
   );
   ...
Run Code Online (Sandbox Code Playgroud)

当我收到元素列表(我订阅了服务调用)时,我根据元素列表构建表单组。在模板中,我有一个 *ngIf 仅当列表大于零时才绘制。

*ngIf="elementList?.length>0"
Run Code Online (Sandbox Code Playgroud)

由于elementList是异步获取的,所以这个ngIf不起作用。我读到可以将 ngIf 与 AsnycPipe 一起使用。所以在模板中我将有:

*ngIf="elementList$ && elementList$.length>0"
Run Code Online (Sandbox Code Playgroud)

其中 elementList$ 是从服务调用返回的 Observable。

   public elementList$: Observable<Array<Element>>;   

   elementList$ =this.service.getElementList()
Run Code Online (Sandbox Code Playgroud)

我想知道收到 elementList 后如何创建 FormGroup。首先,我需要创建 FormGroup,然后模板应该调用 *ngIf 来绘制元素。

angular angular-reactive-forms async-pipe

5
推荐指数
2
解决办法
4726
查看次数