Question

你好，我正在学习角度6，我正在创建一个简单的应用，其中我使用服务模块从API获取数据，数据来自API，但是当我尝试显示在视图中时，下面给出的错误是我的代码，请帮我做什么？我做错了。

发起人

export class LibraryComponent implements OnInit {

  users$: Object;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.getLibrary().subscribe(
      data => this.users$ = data 
    );
  }

}

HTML

<h1>{{users.artist.name}}</h1>

API数据

{
"artist":{
"name":"Bebe Rexha",
"mbid":"db8fad3a-e131-47a1-8782-c2ee93708cdd",
"url":"https://www.last.fm/music/Bebe+Rexha",
"image":[
{
"#text":"https://lastfm-img2.akamaized.net/i/u/34s/3c877e9871c5a1c6b23ba80c69e5cfb1.png",
"size":"small"
},
{
"#text":"https://lastfm-img2.akamaized.net/i/u/64s/3c877e9871c5a1c6b23ba80c69e5cfb1.png",
"size":"medium"
},
{
"#text":"https://lastfm-img2.akamaized.net/i/u/174s/3c877e9871c5a1c6b23ba80c69e5cfb1.png",
"size":"large"
},
{
"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/3c877e9871c5a1c6b23ba80c69e5cfb1.png",
"size":"extralarge"
},
{
"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/3c877e9871c5a1c6b23ba80c69e5cfb1.png",
"size":"mega"
},
{
"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/3c877e9871c5a1c6b23ba80c69e5cfb1.png",
"size":""
}
],
"streamable":"0",

错误

LibraryComponent.html:1 ERROR TypeError: Cannot read property 'artist' of undefined
    at Object.eval [as updateRenderer] (LibraryComponent.html:1)

Answer 1

users $在您的ts中最初是未定义的，并且在从observable订阅数据时会为users $属性分配一个值。

<h1>{{users$?.artist.name}}</h1>

？这里处理未定义的问题。

Answer 2

在将用户分配给“ users $ ”变量时，但是在html中，您指的是错误的引用“ 用户”。

请使用?的安全导航操作符。如果值不可用，它将不会引发任何错误。

<h1>{{users$?.artist?.name}}</h1>

Angular 6无法在视图上呈现数据

2 个答案: