用从ngrx存储中检索的日期填充响应式表单

Question

我想填充一个表单的数据从存储，但无论我尝试(setValue, patchValue)，表单仍然是空的

export class MyComponent implements OnInit, OnDestroy {
public newsletterToEdit$: Observable<NewNewsletter> =
this.store.selectNewsletterToEdit();
public form = this.fb.group({
title: ['', Validators.required],
subtitle: ['', Validators.required],
message: ['', Validators.required],
users: [''],
groups: [''],
searchedUsers: [''],
searchedGroups: [''],
allowReplies: [false, Validators.required],
replyFrom: ['NONE'],
});
ngOnInit(): void {

//this.newMessageForm.controls("标题")。setValue("测试标题");→这是有效的，它用字符串

填充控件

this.newsletterToEdit$.pipe(
tap((newsletter) => {
console.log('newsletter to edit: ', newsletter);
// this.newMessageForm.patchValue(newsletter) -> another try
this.form.setValue({
title: newsletter.title,
allowReplies: null,
groups: newsletter.sentToGroupCode[0],
message: newsletter.message,
replyFrom: 'NONE',
searchedGroups: '1',
searchedUsers: '2',
subtitle: newsletter.subtitle,
users: '3',
});
})
);
}
}

我已经检查过了，我确实有数据存储，但似乎控制台日志从未记录过，所以这意味着管道(tap())不调用

Answer 1

原因是ngrx选择器提供了冷观察对象。在有人订阅它之前，冷可观察对象不会发出任何数据。

尝试使用

this.newsletterToEdit$.subscribe(
(newsletter) => {
console.log('newsletter to edit: ', newsletter);
// this.newMessageForm.patchValue(newsletter) -> another try
this.form.setValue({
title: newsletter.title,
allowReplies: null,
groups: newsletter.sentToGroupCode[0],
message: newsletter.message,
replyFrom: 'NONE',
searchedGroups: '1',
searchedUsers: '2',
subtitle: newsletter.subtitle,
users: '3',
});
})
});

，以便从它接收值。

请注意，你应该取消订阅它，或者使用一种简化的方法(例如，将表单定义为一个可观察对象，并使用async管道订阅它)。