时间戳

首页 > 解决方案 > *Ngfor 不显示数据

angular - *Ngfor 不显示数据

问题描述

我编写了一个简单的 Angular 6 代码，我在其中使用 get 和 HTTP 从 API 请求数据。当我运行时，似乎我正在获取数据，但 *NgFor 没有显示我的数据。我搜索了很多网站，但由于我没有收到任何错误，所以我找不到问题所在。

下面是我的 app.component.ts。

    import { Component } from '@angular/core'; 
    import {HttpClient,HttpParams, HttpHeaders} from '@angular/common/http'; 
     @Component({
      selector: 'app-root', 
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
     })
     export class AppComponent {

       readonly ROOT_URL= 'https://api.coinmarketcap.com/v2'
       posts: any;
       data: any;

      constructor(private http:HttpClient){} 

    getPosts(){
      this.posts=this.http.get(this.ROOT_URL +'/listings').subscribe(data => { 
      console.log(data); 
      this.data = data; 
    });
      const mapped = Object.entries(this.posts).map(([type, value]) => ({type,       
    value}));

      }

      //title = 'app';
    }

这是我的 app.component.html

    <h1>Get Cryptolist </h1> 
    <button class="btn btn-default" (click)="getPosts()">Cryptocurrency    
     list</button>
    <div class="container m-t-10" > 
    <div *ngIf = "mapped">
    <table >
     <tbody>
       <tr  *ngFor="let post of mapped">
       <td>{{post.id}}</td>
       <td>{{post.name}}</td>
       <td>{{post.symbol}}</td>
       <td>{{post.website_slug}}</td>
    </tr>
      </tbody>
    </table>
    </div>
    [enter image description here][1]</div>

标签： angular

解决方案

您mapped在函数内声明常量，因此您无法在模板中访问它。在模板中只能访问类级别的变量。因此，在您的 app.component.ts 中，您应该在create mapped iemapped行下方创建一个变量ie 。data: any;mapped:any;

而在函数getPosts()中，替换行 

const mapped = Object.entries(this.posts).map(([type, value]) => ({type,       
    value}));

和

this.mapped = Object.entries(this.posts).map(([type, value]) => ({type,       
        value}));

此外，您需要将上面的行移到 http 调用的订阅处理程序中，即在该行下方，this.data = data;因为它是异步的，如果您尝试直接在处理程序之外访问它， this.data 将是未定义的。试试看，如果您的服务正确返回数据，它将显示数据。希望能帮助到你。

推荐阅读