angular ngOnInit() 与 HttpClient ，异步获取 json 数据到 typescript 数据

Question

当我设置 HttpClient(this.http) 以获取 ngOnInit() 中的数据时：

 ngOnInit(): void {
    this.http.get('http://127.0.0.1:3000/getData').subscribe((data) => {
      const type = this.route.snapshot.paramMap.get('type');
      this.theme = data;
      this.side = this.theme.find((item, index, array) => {
        return item.router == type;
      });
}

this.side 是一个 node.js 返回一个 json 对象和 find 像这样的一些条件：

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

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

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

这些参数可以在网页上正常显示。点赞<img src="{{side.PhotoUrl}"> 图片可以正常显示。但是 chrome 控制台显示了很多这样的错误：

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)

PhotoUrl,Title,Router 这些都有类似的错误。我不知道这是异步问题还是打字稿问题。

Answer 1

提示订阅后尝试console.log() 并检查console.log

之前或之后是否发生错误

如果之前发生过，这是一个 async 错误，你应该考虑在加载路由之前使用一些 route resolver 来获取数据，或者只是使属性可选 side?.photoUrl

Answer 2

那是因为您正在尝试使用尚无值的变量呈现模板（因为 REST 调用在您的模板呈现后 解析），如错误提示。

尝试在源属性上使用 safe navigation operator ?.：

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

另一种常见模式是将需要该变量的整个 DOM 片段包装起来，并检查该变量，例如：

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

参见 <ng-content />，但任何元素都有效：根据您的 use-case 选择。

Answer 3

您可以在初始化期间使用默认 url 初始化 side.photourl。这样你就不会在第一次渲染时在图像的 src 中得到 undefined。

如您所言，这是一个异步问题

angular ngOnInit() 与 HttpClient ，异步获取 json 数据到 typescript 数据

angular ngOnInit() whith HttpClient , the asynchronous get json data to typescript data

asynchronous

angular-template

angular