无法将Observable返回的对象作为输入组件Angular 5传递

Question

我有一个小组件，我只有一个输入

Ts组件代码

 @Input() variables;

      ngOnInit() {
        console.log(this.variables);
    }

我使用我的组件TS

envVars$: Observable<{
            names: String[],
            values: {}
          }>;

我在哪里使用我的组件HTML

 <app-code  [variables]="(envVars$ | async)?.values | json"></app-code>

在控制台日志中，虽然我的对象已满，但我还是空了

Answer 1

日志显示为null，因为您在异步定义对象之前记录ON INIT。异步管道完全按预期工作。如果你需要在init上定义对象，那么你需要稍微改变你的结构。

这样做是为了确保在组件实例化之前填充observable：

<app-code *ngIf="envVars$ | async as enVars" [variables]="envVars.values | json"></app-code>

这里的ngIf告诉angular在envVars $发出值之前不实例化组件。