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

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

改为执行此操作以确保在组件实例化之前填充可观察对象:

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

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