Angular 无法读取属性'；列出标签'；未定义的

我有型号

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;
}

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;
        }
    )
  }

}

<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>

从服务器端，我通过id在

info url.component.ts

中获取关于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;
}

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;
        }
    )
  }

}

<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>

获取了我在

信息url.component.html

中输出的数据：

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

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;
        }
    )
  }

}

<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>

需要查看执行

*ngFor

指令的第11行

我无法理解模板中出现错误的原因。

---

请帮助我。

url

最初未定义，它将在触发

ngOnInit

后定义

这应该可以解决它

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

---

也许是的，但我想将来我的问题和答案也会对任何人有所帮助。如果你不同意我想知道你的理由对不起，你的评论是针对我的Alexey吗？如果是这样，我不知道你的意思是什么？我的评论是针对你的。我想说我不同意你的第一篇文章。请原谅，我的英语水平很高，因为我刚开始学习。你完全有权发表你的意见。我们在这里只是为了避免发布重复的问题，如果它们是重复的，我们应该将它们标记为重复的。同样的问题也有很多，所以我建议你在发帖之前进行彻底的搜索。如果你只是用谷歌搜索你的标题，你会发现很多问题，这里还有几个问题：都是同一个问题：）我同意你的观点。打扰一下我想以后我不会再在stackoverflow中重复问题了。非常感谢。你对我问题的回答对我很有帮助。太好了，那么请把我的回答作为你问题的答案，谢谢。我看不出有什么问题：）