Question

我一直在寻找已发布的问题，但似乎没有人回答这个特殊情况。

基本上，我有一个父组件，它将数据传递给子组件。 html中没有什么不寻常之处：

<child-component [dataChild]="dataParent"></child-component>

dataParent是http调用的结果，它是由订阅者初始化的：

this.myService.myObserver.subscribe(d => {
      this.dataParent = d;          
});

dataParent现在将是这样的：

{
 name: "some random name",
 id: 1
}

在子html中，这不会引发错误，上面的对象将按预期显示：

<p>{{dataChild | json}}</p>

然而，这将：

<p>{{dataChild.name}}</p>

我在其他答案中看到，有些人处理异步属性的方式是使用* ngIf。但是，我认为这有点hacky，这里的问题是只有在访问属性时才会发生错误。

我在这里错过了什么吗？

Answer 1

您可以像这样使用Elvis运算符：

<p>{{dataChild?.name}}</p>

Answer 2

如您在评论中所述，您无需使用*ngIf您只能使用elvis运算符来实现此目的.Elvis运算符的目的是允许我们指定绑定数据将在以后可用的绑定。在这种情况下也发生了同样的情况，您的数据在绑定之前可用于组件。所以这里我们只使用elevis操作符限制抛出错误，当数据可用于组件时，它会自动绑定到组件。所以你可以使用

<p>{{dataChild?.name}}</p>

有关更多说明，请参阅此处我创建了一个dummt plunker，假设您的用例希望这可以清除所有内容。

Working Example Demo

角度2输入正常但属性未定义

2 个答案: