Question

我使用Ionic 2而且我不能消耗json。由于某种原因，它会引发错误。

这是我更新的代码。

销售service.ts

@Injectable()
export class SalesService {
  constructor(public http: Http) {
    this.http = http;
 }
retrieveSalesData() {
    return this.http.get("http://api.randomuser.me/?results=10");
 }

}

sale.ts

@Component({
  selector: 'page-sale',
  templateUrl: 'sale.html',
  providers: [SalesService],
})
export class SalePage {
data:any;
  constructor(data: SalesService) {
    this.data=data.retrieveSalesData().subscribe(data =>{
              this.data=JSON.parse(data._body).results;
              console.log("Inside Subscribe (All Elements):"+ this.data);
              console.log("Inside Subscribe (Single Element):"+this.data[1].name.first);
            });
        console.log("Inside Constructor (All Elements):"+ this.data);
        console.log("Inside Constructor (Single Element):"+ this.data[1].name.first);
  }
  ionViewDidLoad() {
              console.log("Inside IonView (All Elements):"+ this.data);
              console.log("Inside IonView (Single Element):"+this.data[1].name.first);
  }
}

sale.html - 这不是问题，所以我对代码进行了评论

<ion-list>
    <ion-content padding>
<!--<ion-list>
    <ion-item *ngFor="let item of data">
      <h2>{{item.name.first}}</h2>
    </ion-item>
  </ion-list>-->
</ion-content>

这是我的错误：

我想我发现了这个问题，但不知道如何清除它。所有元素都是在订阅中接收的，但不是在构造函数中以及在IonView中。请指教。

这是我的离子信息

Answer 1

更改您的sales-service.ts文件，如bleow

@Injectable()
export class SalesService {
salesData:any;
  constructor(public http: Http) {
    //this.http = http;
    this.salesData = [];
  }
retrieveSalesData() {
    this.http.get('https://randomuser.me/api/?results=10')
    .subscribe(salesData => {
      this.salesData = salesData.result;
    });
  }
}

在你的HTML

中

<ion-list>
    <ion-item *ngFor="let person of data">
      <p>{{person.name.first}}</p>
    </ion-item>
  </ion-list>
</ion-content>

Answer 2

我不关心你的 update1 。

我假设您在 this.data 对象中获得响应对象。

如果您正在处理最新的angular2版本，请确保使用让关键字代替＃，如下所示

<ion-item ngFor="let person of data">                   //<<<===here
      <p>{{person?.name.first}}</p>                     //<<<=== (?.) operator is used as you deal with async call.
    </ion-item>
  </ion-list>

Answer 3

尝试下面的

<强>销售service.ts

@Injectable()
export class SalesService {
  salesData:any;
  constructor(public http: Http) {
   this.http = http;
   this.salesData = null;
 }
retrieveSalesData() {
return this.http.get('https://randomuser.me/api/?results=10')
}
}

<强> sale.ts

 @Component({
 selector: 'page-sale',
 templateUrl: 'sale.html',
 providers: [SalesService]
})
export class SalePage {
data:any;
  constructor(private salesService: SalesService) {
     }
 ionViewDidLoad() {
  this.salesService.retrieveSalesData()
  .subscribe(salesData => {
     this.data= salesData;
   });
 }
}

Answer 4

尝试升级您的应用脚本：

npm install @ionic/app-scripts@latest

他们之前的版本缺少一个they just added to the rollup process。

的JSON插件

Answer 5

我找到了适合我的答案。

这就是我所做的，

public data:Users[]=[];
  constructor(public pdata: SalesService) {
    pdata.retrieveSalesData().subscribe(data =>{
              JSON.parse(data._body).results.forEach(element => {
                this.data.push(
                  new Users(element.name.first)
                   );
              }); 
            });
  }

export class Users {
  name: string;
  constructor(_name: string) {
     this.name = _name;
  }
}

这对我有用。如果有另一种优雅的方式。请随时更新答案。谢谢你所有的时间。

Ionic 2消耗json问题

5 个答案: