Angular 5-Observable-将Observable的第一个值设置为表单组

我的onInit方法中确实有一个Observable of Contacts,并且还将将Observable的第一个联系人设置为我的表单。有没有人提示如何执行此操作?

ngOnInit() { 
    let contactsObservable: Observable<Contact[]> = 
    this.contactService.getAllContacts();
    contactsObservable.subscribe(contacts => {
        this.contacts = contacts; 
    });

    this.form = this.fb.group({ 
                // this.contacts[0] does not work
      contact: [this.contacts[0], [Validators.required]] // how to get contact[0] into form for presetting
    });
}
伏击

您得到的联系人异步。可观察值返回时可以放入值。

ngOnInit() { 
   this.form = this.fb.group({ 
     contact: ['', [Validators.required]] 
   });
   let contactsObservable: Observable<Contact[]> = 
   this.contactService.getAllContacts();
   contactsObservable.subscribe(contacts => {
       this.contacts = contacts; 
       this.form.controls['contact'].setValue(this.contacts[0])
   });
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular 2和RxJS 5 Observable.share()

Angular 2 RC5-使用Observable重定向路线

Angular Observable订阅回退?

Angular 4和RxJS 5:Observable.concat()表现异常

Angular 5从http请求获取正确的Observable类型(为什么总是Observable <Object>?)

Angular5 HttpInterceptor取决于Observable的结果

Angular 5:类型“ Observable <any>”上不存在属性“ then”

Angular 5:从函数返回一个Observable

在Angular 5 http请求中使用observable有什么好处?

Angular 5-如何忽略更新Observable的一个属性

将Angular和RxJS 5迁移到6之后的错误-类型'Observable <{}>'无法分配给类型'Observable <....>'

如果第一个observable为null,则angular rxjs仅订阅第二个Observable

从Angular 8中的Observable获取最后一个值

Angular 2 Typescript Observable返回第一个对象结果

Angular Observable 地图系统

Angular 5 / Typescript/RxJS - 从 Observable 获取数据

从 Angular5 http.get 返回 observable

如何将 Observable<T> 的第一个元素添加到每个组?

Angular 5:如何按字母顺序对 Observable 进行排序?

angular 5 将值设置为嵌套表单组表单数组

Angular - rxjs - 将 Observable 数组转换为另一个 Observable 数组

Angular 6 返回 Observable

Angular 6 等待 Observable

Observable 只发出第一个值

RXJS/Angular 替换 Observable

Angular 9 从 Observable 返回 Observable

Angular - 将一个 observable 的值分配给另一个 observable 的字段

来自 Subject 的 Observable 发出第一个值为 null

Angular catchError 并返回 observable