如果没有数据并使用 *ngIf="menuData$ 时表单不加载

Question

我在表单上使用Observable来获取模板端的数据，数据看起来像这样。

<form *ngIf="menuData$ | async as menuData; else loading" [formGroup]="form">

这非常有效，我可以从API访问数据中的所有字段。我现在面临的问题是，当我想使用此表单创建新记录时该怎么办。在这种情况下，没有menuData$，这意味着我的表单从不显示字段。处理此问题的最佳或正确方法是什么？

这是我用于可观测的代码

loadData(docId: string) {
console.log('We are loading Data for Doc : ' + docId);
this.menuParents$ = this.menuService.fetchMenuParents().pipe(
tap(parents => console.log(parents))
)
this.menuData$ = this.menuService.fetchMenuItem(docId).pipe(
tap(menuData => this.form.patchValue(menuData)),
tap(menuData => this.form.controls['DocId'].patchValue(menuData._type + '::' + menuData._id) )
)
this.saveBttn = 'Update'}

在模板上，我只是将控件绑定到表单上，该表单是被动的，在可观察到的返回数据后进行修补

Answer 1

在组件TS:中

@Input() mode = 'add'; // or 'edit'

在您的模板中：

<form *ngIf="(mode === 'add' || (menuData$ | async as menuData)); else loading" [formGroup]="form">