Question

我编写了一个简单的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>

Answer 1

因为常量映射位于函数的范围内。将其定义为类变量，并且this.mapped应该在内部

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

您在函数内声明了mapped常量，因此无法在模板中访问它。在模板中只能访问类级别的变量。因此，您应该在app.component.ts中创建一个mapped变量，即在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将是未定义的。尝试一下，如果您的服务正确返回数据，它将显示数据。希望对您有所帮助。

Answer 3

为了使此工作正常进行，需要做一些事情。其中之一是在可观察的流中执行数据映射，然后使用异步管道将其绑定到正确的数据。

您的控制器将具有以下内容：

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

在您看来：

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

请记住，使用object.entries会将对象分解为[key, value]对数组，并且不能以您上面使用的方式使用。只需摆脱地图操作员即可解决此问题。

Answer 4

在其他人遇到相同问题的情况下，这是我解决的方法。

  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. 
});

* Ngfor不显示数据

4 个答案: