【问题标题】:*ngFor does not display data*ngFor 不显示数据
【发布时间】:2019-09-14 19:34:52
【问题描述】:

我正在编写我的 angular2 应用程序。 我有从数据库和dashboard.component.html 获取数据的服务,它使用该服务来显示获取的数据。

我的服务:

detailedInfo(rownum:number){
    const url='/project/users';
    return this.http.get(`${url}/${rownum}`).pipe(map((data:any)=>data));
}

dashboard.component.ts:

resultDetails:any[]=[];

checkInformation(rownum:number) {
    console.log("Details are called");
    this.myService.detailedInfo(rownum).subscribe(
        data=> {
            console.log("we got:",data);
            this.resultDetails=data;
            console.log("length of details:"+this.resultDetails.length); 
        },
        error => {
            console.log("Error",error);
        }
    );
}

dashboard.component.html:

<i (click)="checkInformation(somenumber)"></i>
<table>
    <tr  *ngFor="let res of resultDetails">
        <td >result
           <p>any text</p>
        </td>
        <td>{{res.rownumber}}</td>
    </tr>
</table>

console.log 打印正确的结果,但什么也不显示。我该如何解决这个问题?提前致谢。

【问题讨论】:

  • 请添加数据的样子
  • console.log("we got:",data); 输出什么
  • @mahval 正确打印数组中的数据
  • 我想我们在问响应是什么样的,显示 JSON。您可以对您的问题进行编辑
  • 如果它是一个对象,你可以像这样使用 keyvalue 管道
    {{data | json}}

标签: arrays angular typescript


【解决方案1】:

问题在于错误的 html

  <i (click)="checkInformation(somenumber)"></i>
<table>

    <tr  *ngFor="let res of resultDetails">
        <td >result
           <p>any text</p>
        </td>
        <td>{{res.rownumber}}</td>
    </tr>

    </tr> <!-- this is extra tr remoe it 

</table>

删除多余的 tr

【讨论】:

  • 我认为这是问题中的错字并已对其进行了编辑! xD
猜你喜欢
  • 2019-09-18
  • 2017-01-06
  • 1970-01-01
  • 2019-09-30
  • 2017-11-25
  • 2020-09-02
  • 2021-06-28
  • 2017-08-07
相关资源
最近更新 更多