无法读取未定义的属性 'list_tags'

Question

我有模型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 行。

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

Answer 1

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

这应该可以解决问题

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

无法读取未定义的 属性 'list_tags'

Cannot read property 'list_tags' of undefined

angular2-template

angular

无法读取未定义的属性 'list_tags'