ng-repeat值未定义

时间:2019-01-13 18:29:41

标签: angular typescript

我正在尝试从JSON对象中获取某些元素以显示在我的html中,但是我无法在我的应用中这样做。 我在做什么:

  1. 从我的服务中的steamAPI中获取JSON(成功,我可以在console.log中看到整个JSON)
  2. 将服务中的JSON传递给我的组件(成功的话,如果*ngIF=items失败,浏览器将什么也不显示)
  3. 我尝试使用代码market_hash_name从JSON获取icon_url<li ng-repeat="(key,value) in items.rgDescriptions">(失败,ng-repeat有效,但浏览器显示错误ERROR TypeError:“ _ co。值未定义”)

    <p>{{ value.market_hash_name }} <button>Add to your list</button></p> 这失败了

我在w3schools中做了一个try-it示例来尝试ng-repeat函数。 我将JSON复制到示例中(必须将其缩短以适合它),并且可以正常工作。 https://www.w3schools.com/code/tryit.asp?filename=FZ6HYMY2YP2P

该示例在w3上有效,但是当我将相同的代码(在某种程度上将整个内容粘贴到我的东西上)粘贴到我的项目中时,它将失败,并显示“ ERROR TypeError:“ _ co.value is undefined”错误。看来问题出在我的专案中,但找不到。

如何解决此问题?

我的代码:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../api.service';

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

  constructor(private api: ApiService) { }
  
  items: Object;


  ngOnInit() {

    this.api.getItems().subscribe(data => {
        this.items = data;
        console.log(this.items);
      }
    );
  }

}
<h1>Users</h1>


<ul *ngIf="items">
  <li ng-repeat="(key,value) in items.rgDescriptions"> 
    <img src="http://cdn.steamcommunity.com/economy/image/{{value.icon_url}}" class="img-responsive" />
    <p>{{ value.market_hash_name }} <button>Add to your list</button></p>
  </li>
</ul>

`

1 个答案:

答案 0 :(得分:0)

没有 ng-repeat 带有角,您需要使用 ngFor

 <li *ngFor="let (key,value) of items.rgDescriptions"> 
    <img src="http://cdn.steamcommunity.com/economy/image/{{value.icon_url}}" class="img-responsive" />
    <p>{{ value.market_hash_name }} <button>Add to your list</button></p>
  </li>