动态形式的异步绑定答案

【问题标题】：Async binding in dynamic form动态形式的异步绑定
【发布时间】：2018-02-13 21:33:13
【问题描述】：

根据creating dynamic forms 上的 Angular 指南，我设置了一堆可以动态创建表单的类。这很好用，但如果我不能动态地将表单建立在模型对象上，它实际上并没有比仅仅编写 html 节省太多的精力。

所以我创建了一个服务，它可以根据模型对象中的属性动态构建表单。

问题 - 模型对象是从 Web 服务异步返回的。因此，Angular 在进行初始绑定时会爆炸。

<dynamic-form [formConfig]="formConfig"></dynamic-form>

我尝试将 formConfig 设为 Promise 或 Observable 并将此调用更改为：

<dynamic-form [formConfig]="formConfig | async"></dynamic-form>

但它仍在尝试立即绑定并爆炸，因为 undefined 正在被传递到 <dynamic-form>。

我认为问题在于 async 管道在我的自定义组件上似乎无法正常工作。

有什么建议吗？

【问题讨论】：

请给minimal reproducible example。 formConfig 在哪里定义？ “炸毁”究竟是什么意思？
如果不复制 15 个文件，几乎不可能用 Angular 给出一个“最小”示例。这就是为什么我链接到他们的文章来了解整个过程。 “炸毁”意味着很多错误，因为 undefined 正在传递给 dynamic-form。我的问题更多的是关于异步如何与 Angular 中的绑定一起工作。
您始终可以为任何想要实际运行它的人提供最小的服务组件设置和指向 Plunkr 或其他东西的链接。但是只有一个模板 sn-p 并且在没有错误细节的情况下，很难准确地说出问题所在。
@jonrsharpe 我提供了错误详细信息。您不需要代码来理解所描述的问题。

【解决方案1】：

无论出于何种原因，async 管道似乎无法与用户编写的组件一起正常工作。相反，我发现用*ngIf 保护整个事情可以解决问题。

<div *ngIf="formConfig | async; let formConfig">
    <dynamic-form [formConfig]="formConfig"></dynamic-form>
</div>

【讨论】：