_co.photo 是未定义的控制台错误和错误上下文，但代码按预期工作答案

【问题标题】：_co.photo is undefined console error and error context, but code works as expected_co.photo 是未定义的控制台错误和错误上下文，但代码按预期工作
【发布时间】：2019-12-28 12:30:47
【问题描述】：

我遇到了角度组件的问题。

当我使用选择器制作组件时，它按预期工作：执行httpget，并渲染带有标题的照片。但是在控制台中我得到了两个错误：

ERROR TypeError: "_co.photo is undefined"
    View_PhotoHolderComponent_0 PhotoHolderComponent.html:2

和

ERROR CONTEXT 
...
PhotoHolderComponent.html:2:8
    View_PhotoHolderComponent_0 PhotoHolderComponent.html:2

我得到了 html：

    <div class="photo-holder">
    <h2>{{photo.title}}</h2>
    <img src="{{photo.url}}">
    </div>

和ts：

import { Component, OnInit } from '@angular/core';
import { Photo } from './photo'
import { PhotoDeliveryService } from '../photo-delivery-service.service'

@Component({
  selector: 'app-photo-holder',
  templateUrl: './photo-holder.component.html',
  styleUrls: ['./photo-holder.component.css']
})
export class PhotoHolderComponent implements OnInit {

  photo:Photo
  constructor( private photoService : PhotoDeliveryService) {
  }

  ngOnInit() {
    this.photoService.getRandomPhoto().subscribe((data: Photo) => this.photo = {...data})
  }

}

和服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Photo } from './photo-holder/photo'

@Injectable({
  providedIn: 'root'
})
export class PhotoDeliveryService {
  value : Number
  url : string

  constructor(private http: HttpClient) { 
    this.url = "https://jsonplaceholder.typicode.com/photos/";
    this.value = Math.floor(Math.random() * 10) + 1; 
  }

  getRandomPhoto()  {
     return this.http.get<Photo>(this.getUrl())
  }

  getUrl(){
    return this.url + this.value;
  }

}

我怀疑可以在返回查询结果之前通过绑定属性来实现。我怎样才能摆脱这个问题，我可以等待这个查询，还是这是不同类型的问题？

【问题讨论】：

{{照片?.title}}

标签： javascript angular typescript http frontend

【解决方案1】：

您收到错误是因为在您的服务可以解析之前，模板绑定已解析，并且当时照片对象未定义。

首先，您可以初始化照片对象，但随后您可能必须使用 ChangeDetectorRef 检测更改以反映服务返回的值。

photo:Photo = {
    title:'',
    url:''
  };
  constructor( private photoService : PhotoserviceService, private cdr:ChangeDetectorRef) {
  }

  ngOnInit() {
    this.photoService.getRandomPhoto().subscribe((data: Photo) => {
    this.photo =  data;
    this.cdr.detectChanges();
    });
  }

【讨论】：