ngFor 不工作 angular5答案

【问题标题】：ngFor not working angular5ngFor 不工作 angular5
【发布时间】：2018-04-21 12:12:31
【问题描述】：

我正在尝试在我的组件中显示来自服务器的一些数据。

export class CommerceComponent implements OnInit {

     dealList;

    ngOnInit() {
         this.getDeals();
     }

    getDeals(){
    this.gatewayService.searchDeals(this.searchParams).subscribe(
      (data:any)=>{
        this.dealList = data.result;
        console.log("Deal list",this.dealList[0]);
      },
      (error)=>{
         console.log("Error getting deal list",error);
      }
    );
  }

服务

searchDeals(data){

        var fd = new FormData();
        fd.append('token',this.cookieService.get('token'));
        fd.append('search',data.keyword);

        return this.http.post(config.url+'hyperledger/queryByParams',fd);

    }

在html中

<div class="deal1" *ngFor="let deal of dealList">
  {{deal.Deal.title}}
 </div>

但是列表没有呈现，但是，我得到 console.log("Deal list",this.dealList[0]); 单个对象和 this.dealList 返回对象数组

【问题讨论】：

尝试在ngAfterViewInit而不是ngOnInit中做同样的事情。
先检查你的dealList是否传入了静态数据，检查是否渲染
同样的意思
@AbineshJoyel this dealList =[1,2]; this 正确渲染列表
同样的事情意味着对getDeals函数的相同调用只需在ngAfterViewInit中执行，而不是在ngOnInit中执行。

标签： javascript angular angular5

【解决方案1】：

如果在this.dealList[0] 中得到结果，还需要遍历[0] 索引项。

<div class="deal1" *ngFor="let deal of dealList[0]">
   {{deal.title}}
</div>

但是你的dealList 是未定义的，所以访问[0] 会抛出异常。你也需要初始化它

dealList = []

【讨论】：

this.dealList[0] 填充单个对象，this.dealList 获取对象数组

【解决方案2】：

您要显示的标题位于result[i].Deal.title 这是您的 JSON 响应的图像。

<div class="deal1" *ngFor="let deal of dealList">
    {{deal.Deal.title}}
</div>

【讨论】：