angular ngOnInit（）使用HttpClient，异步获取json数据到typescript数据

当我设置

HttpClient

（this.http）以在

ngOnInit（）中获取数据时：

this.side
是一个node.js，返回一个json对象，并
查找
类似以下的一些条件：

{
  PhotoUrl: 'abc.jpg',
  Title: 'title',
  Router:'router',
}

ERROR TypeError: Cannot read
property 'PhotoUrl' of undefined
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14689)
    at checkAndUpdateView (core.js:13803)
    at callViewAction (core.js:14149)
    at execComponentViewsAction (core.js:14081)
    at checkAndUpdateView (core.js:13804)
    at callViewAction (core.js:14149)
    at execEmbeddedViewsAction (core.js:14107)
    at checkAndUpdateView (core.js:13799)
    at callViewAction (core.js:14149)

当我在
此.side
模板中设置时：

<div class="side-photo">
    <img src="{{side.PhotoUrl}">
</div>
<div class="side-photo">
    {{side.Title}}
</div>

PhotoUrl、标题、路由器
这些都有类似的错误。
我不知道这是异步问题还是typescript问题。
提示在订阅后尝试
console.log（）
something，并检查
console.log之前或之后是否发生错误

如果它以前发生过，它是一个<强> Aycn路由解析器< /C>来获取数据，或者只是让属性可选<代码>边。.Pulurl 
< P>这是因为您试图用一个没有值的变量来呈现模板。（因为REST调用是在呈现模板之后解析的），正如错误所示

尝试在源属性上使用
？。
：

<div class="side-photo">
    <img [src]="side?.PhotoUrl" />
</div>
<div class="side-photo">
    {{side?.Title}}
</div>


{{side？.Title}}

另一种常见模式是使用变量检查包装需要该变量的整个DOM片段，如：

<ng-content *ngIf="side">
    <div class="side-photo">
        <img [src]="side.PhotoUrl" />
    </div>
    <div class="side-photo">
        {{side.Title}}
    </div>
</ng-content>


{{side.Title}}

请参阅，但任何元素都有效：根据您的用例进行选择。
您可以在初始化过程中使用默认url初始化side.photourl。这样，您就不会在图像首次呈现时在图像的src中未定义

正如您所建议的那样，这是一个异步问题。
？。
根本不“使属性成为可选的”。请参阅我答案中的链接。“可选属性”指的是类型接口或类（位于类型检查器内的编译时）其中as
？。
是一个运行时属性访问器，如果未定义，它不会爆炸。哦，好吧。我不知道这一点！！我承认他们感觉有点相似，但他们的行为非常不同。：）总是乐于分享。
<ng-content *ngIf="side">
    <div class="side-photo">
        <img [src]="side.PhotoUrl" />
    </div>
    <div class="side-photo">
        {{side.Title}}
    </div>
</ng-content>