代码之家 › 专栏 › 技术社区 › Ranjith Varatharajan

Ionic 2消费json问题

ionic2 angular web-services json

0

Ranjith Varatharajan · 技术社区 · 9 年前

这是我更新的代码。

销售服务.ts

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

}

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

销售.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>

以下是我的错误:

我想我找到了问题,但不知道如何解决。所有元素都是在subscribe中接收的,但不是在构造函数和IonView中。请告知。

这是我的离子信息

5 回复 | 直到 9 年前

1

0

micronyks 9 年前

我不在乎你 更新1 .

我想你会在里面 此.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>

2

0

Mohan Gopi 9 年前

改变你的销售服务。ts文件状气泡

@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>

3

0

Ravin Singh D 9 年前

尝试以下方法

销售服务.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')
}
}

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

4

0

whatsthatitspat 9 年前

尝试升级应用程序脚本:

npm install @ionic/app-scripts@latest

他们以前的版本缺少一个JSON插件,该插件 they just added to the rollup process .

5

0

Ranjith Varatharajan 9 年前

我找到了对我有用的答案。

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

这对我来说很管用。如果有一种替代和优雅的方式。请随时更新答案。谢谢你花了这么多时间。