我是Angular和Typescript的新手,无法到达此控制台错误的底部:“ERROR TypeError:无法读取未定义的属性’值’
我打电话给一个愚蠢的服务,回到查克诺里斯的笑话.这实际上工作正常.但是我收到的是Typescript控制台错误.
我在这里转载:
https://stackblitz.com/edit/angular-chuck
非常感谢您的期待.
data.service.ts
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { DataModel } from './data.model'; @Injectable() export class DataService { constructor( private http: HttpClient ) { } chuckUrl = 'https://api.chucknorris.io/jokes/random'; getChuck() { return this.http.get<DataModel>(this.chuckUrl); } }
data.model.ts
export class DataModel { public category: any; public icon_url: string; public id: string; public url: string; public value: string; }
data.component
import { Component,OnInit } from '@angular/core'; import { DataService } from './data.service'; import { DataModel } from './data.model'; @Component({ selector: 'app-data',templateUrl: './data.component.html' }) export class AppData implements OnInit { constructor(private dataService: DataService) { } joke: DataModel; ngOnInit() { this.dataService.getChuck() .subscribe( (data: DataModel ) => { if (data.category != 'explicit') { this.joke = data; } } ); } }
解决方法
只是用
<div>{{ joke?.value }}</div>
在API响应到达之前,您的笑话对象没有值.这样使用?应用空检查直到响应到达.