【问题标题】:Cannot read property 'list_tags' of undefined [duplicate]无法读取未定义的属性“list_tags”[重复]
【发布时间】:2017-12-02 00:46:04
【问题描述】:

我有模特Url

export class Url {
    author: String;
    description: String;
    list_tags: [{
        name: String
    }];
    count_click: Number;
    full_url: String;
    short_url: String;
    date: String;
    time: String;
}

从服务器端,我通过info-url.component.ts 中的 id 获取有关 url 的数据:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Url } from '../shared/models/url.model';
import { UrlService } from '../shared/services/url.service';

@Component({
  selector: 'app-info-url',
  templateUrl: 'info-url.component.html',
  styleUrls: ['info-url.component.scss']
})
export class InfoUrlComponent implements OnInit {

  url: Url;
  edit: boolean = false;

  constructor(
      private urlService: UrlService,
      private route: ActivatedRoute) {}

  ngOnInit() {
    let id = this.route.snapshot.params['id'];
    this.urlService.getUrlById(id).subscribe(
        data => {
          this.url = data.url;
          this.edit = data.edit;
        }
    )
  }

}

得到了我在info-url.component.html中输出的数据:

<div class="container">
  <h1>Little info about url</h1>
  <div class="url">
    <p>Full url: {{url.full_url}}</p>
    <p>Shortener-url: {{url.short_url}}</p>
    <div class="description">
      <h3>Little description:</h3>
      <p>{{url.description}}</p>
    </div>
    <div class="tags">
      <div *ngFor="let tag of url.list_tags">
        <a>{{tag.name}}</a>
      </div>
    </div>
    <div class="count">
      <p>{{url.count_click}}</p>
    </div>
    <div class="date-time">
      <p>Date: {{url.date}}</p>
      <p>Url: {{url.time}}</p>
    </div>
    <div class="user">
      <p>Created by: <a>{{url.author}}</a></p>
    </div>
    <div *ngIf="edit">
      <button class="btn btn-success">Edit</button>
    </div>
  </div>
</div>

在控制台输出下一个错误:

ERROR TypeError: Cannot read property 'list_tags' of undefined
    at Object.View_InfoUrlComponent_0._co [as updateDirectives] (InfoUrlComponent.html:11)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13106)
    at checkAndUpdateView (core.es5.js:12288)
    at callViewAction (core.es5.js:12651)
    at execComponentViewsAction (core.es5.js:12583)
    at checkAndUpdateView (core.es5.js:12294)
    at callViewAction (core.es5.js:12651)
    at execEmbeddedViewsAction (core.es5.js:12609)
    at checkAndUpdateView (core.es5.js:12289)
    at callViewAction (core.es5.js:12651)

需要查看 *ngFor 指令执行的第 11 行。

我不明白为什么模板中有错误。 请帮帮我。

【问题讨论】:

  • 可能是,但我认为将来我的问题和答案也会对任何人有所帮助。如果你不同意我想知道你的原因
  • 请问,您的评论是针对我的 Alexey 吗?如果是这样,我不确定你的意思是什么?
  • 我的评论是针对你的。我想说我不同意你的第一篇文章。附:对不起,我的英语水平,因为我开始了。
  • 您完全有权发表您的意见。我们只是在这里避免发布重复的问题,如果它们是重复的,我们应该将它们标记为重复。 SO上有很多相同的问题,所以我建议你在发布问题之前进行彻底的搜索。如果你只是用谷歌搜索你的标题,你会发现很多问题,这里还有几个:stackoverflow.com/questions/42268832/…stackoverflow.com/questions/41242793/… 都有相同的问题:)
  • 我同意你的意见。打扰一下。我认为以后我不会再在stackoverflow中重复问题了。

标签: angular angular2-template


【解决方案1】:

url最初没有定义,在ngOnInit被触发之后。

这应该可以解决它

*ngFor="let tag of url?.list_tags"

【讨论】:

  • 非常感谢。您对我的问题的回答对我很有帮助。
  • 太好了,那么请将我的回答标记为您问题的解决方案,谢谢
  • 没关系。我没有看到任何问题:)
猜你喜欢
  • 2017-06-05
  • 2019-03-10
  • 2016-09-14
  • 2021-03-18
  • 2018-11-18
  • 2023-03-23
  • 1970-01-01
  • 1970-01-01
  • 2011-12-21
相关资源
最近更新 更多