如何将异步获取的值传递给 Angular2 中组件的输入

Question

我正在尝试将值传递给组件的输入

<my-comp [question]="currentQuestion"></my-comp>

但是变量 currentQuestion 是在页面首次加载时异步获取的，因此可以理解我收到 undefined 错误。我该如何解决这个问题？

my-comp 模板

<div>
  <p>{{question.title}}</p>
</div>

class 我的补偿

@Component({
  selector: "my-comp",
  templateUrl: "./my-comp.html"
})
export class MyComp {
  @Input() question: any;

  constructor() {}
}

Answer 1

在子组件 my-comp 中尝试 Elvis 运算符 ?. 内部插值 my-comp。

{{ currentQuestion?.aField }}

如果 currentQuestion 是假的（未定义、空等），它将不会访问 aField 成员。

currentQuestion 将是未定义的，直到您从异步调用中获得响应。

更新:

您的 my-comp 模板应如下所示：

<div>
  <p>{{question?.title}}</p>
</div>

它有 ?. 个内插运算符。

How to pass value that's being fetched asynchronously to a component's Input in Angular2