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

Question

我遇到了 Angular 分量的问题。

当我使用选择器制作组件时，它按预期工作:执行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;
  }

}

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

Answer 1

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

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

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

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