无法将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>

在控制台日志中，虽然我的对象已满，但仍为NULL

Answer 1

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

相反，这样做是为了确保在组件实例化之前填充可观察对象：

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

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