Question

从我的API获取数据时，它会显示一个空列表。但是我对代码进行了修改，例如在 home.html 中，我编写了以下代码：

<h1>{{data[i].name}}</h1>

它仅从数组中检索第二个列表项，并且i给出的输出为 0 1 2 ，而我的数据库有10条以上的记录。循环无效。那么如何解决这个问题...

这是我的代码：：

//AuthServiceProvider
private url: string="http://localhost/php_rest_myblog/api/post/read.php"
getData(){
    return this.http.get(this.url)
      .do((res:Response)=>console.log(res))
      .map((res:Response)=>res.json())
  }

//service.pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'service', pure: false
})
export class ServicePipe implements PipeTransform {
  transform(value: any, args:any[]=null): any {
    return Object.keys(value).map(key => value[key]);
  }
}


//home.ts
export class HomePage {
  dataList = [];

  getData(){
    this.authservice.getData()
    .subscribe(
      data=>{ this.dataList=data; });
  }
}


//home.html
  <ion-list>
    <h3>List is here</h3>
     <ion-item *ngFor="let data of (dataList |service); let i = index">
       <h2>{{i+1}}</h2>
       <h1>{{data.name}}</h1>
       <img src="{{data.image}}"> 
       </ion-item>
      </ion-list>

* ngFor从API提取数据时显示空列表

0 个答案: