网站首页 » 前端开发 » Angular 2+ » Angular 2+ ERROR TypeError: Cannot read property ‘name’ of undefined
上一篇:
下一篇:

Angular 2+ ERROR TypeError: Cannot read property ‘name’ of undefined

Angular 2+ 给我们带来新鲜感的同步,也带来了前所未有的负作用,比如一些 AngularJS(Angular 1)中不会出现的报错。在 Angular 中却无情地出现了。正如本篇文章要分享的这个一样,在 AngularJS 中是的特定场景是不会出现 ERROR TypeError: Cannot read property ‘name’ of undefined 的,但在 Angular(Angular 2+) 中却出现了。

这种错误出现的情景:比如你要从服务器获取一个对象,然后在页面中显示这个对象的一个属性值时就很有可能会出现这个问题。

比如:要从服务器中取一个形如 {id:”1″, name:”云库网”, domain:”http://yunkus.com”, age:”2 year”},取到这个数据后把它赋值给 site对象。然后在页面中进行展示。

detail.component.html
<div id="main">
  <div class="detail" *ngIf="site">
    <ul class="detail-container">
      <li>
        <div class="detail-item">网站名:{{site.name}}</div>
        <div class="detail-item">域名:{{site.domain}}</div>
        <div class="detail-item">网站年龄:{{site.age}}</div>
      </li>
    </ul>
  </div>
</div>
detail.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Site } from '../services/site';
import { SiteService } from '../services/site.service';

@Component({
  selector: 'detail-site',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})

export class DetailComponent implements OnInit {
  site_id: string;
  site: Site;
  constructor(
    private _router: Router,
    private _activatedRoute: ActivatedRoute,
    private _siteService: SiteService
  ) { }

  ngOnInit() {
   this.getDetail();
  }

  getDetail(){
    // 获取url中的参数
    this.site_id = this._activatedRoute.snapshot.params['id'];
    this._siteService.querySite(this.site_id).then(site => {
      this.site = site;
    });
  }

  edit = function (): void {
    this._router.navigate(['/edit', this.site_id]);
  }
}

如果 .html 中没添加 *ngIf=”site” 的话浏览器就会报:

错误

ERROR TypeError: Cannot read property ‘name’ of undefined

不仅仅是 name 会这样,domain,age 同样会这样,因为在渲染页面时,数据还没有从服务器中返回,此时 site 就是 undefined,所以要想从这个 未定义的对象中取它的属性肯定是会报错的。

除了通过 *ngIf =”site” 来避免程序出错外,我们还可以通过另外一些方法来实现它:

1.初始化对象: let site:any={};

2.{{site?.name}}

site 后面加个问号也是可以的,不过这种方法在双向绑定 [(ngModel)]=”person.name” 中就无能为力了。

3.还有一种方法,但这种方法也只有在特定的场景下才可以用,那就是 *ngFor 指令,所以在列表页中通过 *ngFor 来循环遍历出数据时也不会报错。

4.请求数据方法放在构造函数中

5.{{site && site.name}},这种写法相当于选判断一下 site 对象是否存在,不存在侧返回空,存在则返 site.name

构造函数实现
export class DetailComponent implements OnInit {
  site_id: string;
  site: Site;
  constructor(
    private _router: Router,
    private _activatedRoute: ActivatedRoute,
    private _siteService: SiteService
  ) { 
      this.getDetail();
   }

  ngOnInit() {}

  getDetail(){
    // 获取url中的参数
    this.site_id = this._activatedRoute.snapshot.params['id'];
    this._siteService.querySite(this.site_id).then(site => {
      this.site = site;
    });
  }

  edit = function (): void {
    this._router.navigate(['/edit', this.site_id]);
  }
}

不过一般情况下不建议在构造函数中写过多的逻辑代码。所以在解决这个报错时,可以根据具体场景选择不同的方法。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-error-typeerror-cannot-read-property-of-undefined/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END