* Ngfor不显示数据

Question

I have written a simple Angular 6 code where I am requesting data from an API with get and HTTP. when I run, it seems that I am getting data but *NgFor is not displaying my data. I have searched many sites but since I don't get any error I can not find the problem.

Below is my 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';
    }

Here is my 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>

---

Answer 1

Because your constant mapped is inside the scope of the function. Define it as the class variable and this.mapped should be inside

mapped;

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


  }

Answer 2

You are declaring mapped constant inside a function so you cannot access it in the template. Only class level variables can be accessed in the template. So in your app.component.ts you should create a mapped variable ie below the line data: any; create mapped ie mapped:any; .

And the in the function getPosts() , replace the line

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

with

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

Also you need to move the above line inside the subscription handler of the http call ie below the line this.data = data; because it is async and this.data will be undefined if you try to access it outside the handler directly. Try it and it will display the data if your service is returning the data correctly. Hope it helps.

Answer 3

There are a few things that need to be done here in order to make this work properly. One of them is to perform the data mapping within the observable stream and then bind to the correct data using the async pipe.

Your controller will have this:

getPosts(){
  this.posts = this.http.get(this.ROOT_URL +'/listings').pipe(
    map(data => Object.entries(data))
  );
}

And in your view:

<tr *ngFor="let post of posts$ | async">
   <td>{{post.id}}</td>
   <td>{{post.name}}</td>
   <td>{{post.symbol}}</td>
   <td>{{post.website_slug}}</td>

Keep in mind that using object.entries will destructure your objects into an array of [key, value] pairs and cannot be used in the fashion that you have used above. Simply getting rid of the map operator should fix this.

Answer 4

In the case someone else has the same problem, here is how I solved it.

  getPosts(){
  this.posts=this.http.get(this.ROOT_URL +'/listings').subscribe(data => { 
  console.log(data); 
  this.data = data[data];//*.NgFor could not itrate because I was itrating an 
                         //object. I needed to choose to take out element data 
                         //from the object. 
});