angular - Angular 6 - 错误类型错误:无法读取未定义的属性“值”
问题描述
我是 Angular 和 Typescript 的新手,无法深入了解此控制台错误:“ERROR TypeError: Cannot read property 'value' of undefined”
我正在调用一个返回 Chuck Norris 笑话的愚蠢服务。这实际上工作正常。但是,我收到了 Typescript 控制台错误。
我在这里转载: https ://stackblitz.com/edit/angular-chuck
非常感谢您的关注。
数据服务.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);
}
}
数据模型.ts
export class DataModel {
public category: any;
public icon_url: string;
public id: string;
public url: string;
public value: string;
}
数据组件
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 响应到达之前,您的joke
对象没有值。因此用于?
应用空检查,直到响应到达。
推荐阅读
- html - 粘贴 html 签名时 Web 邮件输出出错(预期输出与原始输出的差异)
- c++ - 提升标准 C++ 中等效的共享容器迭代器
- sql-server - 创建一个触发器,从一个表中提取价格并防止进入另一个表
- python - 生成 FastText 多标签格式
- laravel - Laravel 设置状态列
- xamarin - Xamarin 表单:在 Type 中找不到具有正确签名的事件处理程序,
- c# - 如何使用实体框架选择多个列并使用 textBlocks 显示?
- r - 使用 forcats 将因子折叠成组时出现错误
- node.js - 显示自适应卡的上半部分
- c++ - 如何使用 dwrite API 从资源中加载字体?