加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 6 – ERROR TypeError:无法读取undefined的属性“value

发布时间:2020-12-17 18:01:34 所属栏目:安全 来源:网络整理
导读:我是Angular和Typescript的新手,无法到达此控制台错误的底部:“ERROR TypeError:无法读取未定义的属性’值’ 我打电话给一个愚蠢的服务,回到查克诺里斯的笑话.这实际上工作正常.但是我收到的是Typescript控制台错误. 我在这里转载: https://stackblitz.co
我是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响应到达之前,您的笑话对象没有值.这样使用?应用空检查直到响应到达.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读