Angular 动态形式可观察输入属性始终为空

Question

我正在自学 Angular 中的响应式(Reactive)表单，并在 Dynamic Forms guide 之后陷入困境。 .

在 question.service.ts文件中，我在返回的 observable 中添加了延迟来模拟 HTTP 请求:

return of(questions.sort((a, b) => a.order - b.order)).pipe(delay(10));

这个 observable 被传递给 app-dynamic-form app-root 中的组件模板:

<app-dynamic-form [questions]="questions$ | async"></app-dynamic-form>

但是 questions输入属性值似乎始终为空。

ERROR TypeError: Cannot read property 'forEach' of null at QuestionControlService.toFormGroup (question-control.service.ts:19) at DynamicFormComponent.ngOnInit (dynamic-form.component.ts:22)

删除 .pipe(delay(10))将示例返回到工作状态。

谁能解释为什么 questions输入属性为空？

见 StackBlitz工作示例。

Answer 1

您收到错误，因为输入属性绑定(bind)是异步发生的。

试试这个:

    <div>
        <ng-container *ngIf="questions$ | async as questions">
         <app-dynamic-form [questions]="questions"></app-dynamic-form>
        </ng-container>
    </div>