離子2消費json問題

Question

我正在使用離子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 - 這不是問題，所以我」 ve評論了代碼

<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

我找到了適合我的答案。

這是我做的，

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

這對我的作品。如果有另一種優雅的方式。請隨時更新答案。謝謝你的所有時間。

Answer 2

改變你的銷售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 3

我不照顧你的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 4

嘗試follwoing

銷售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') 
} 
} 

銷售。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 5

嘗試升級您的應用程序的腳本：

npm install @ionic/app-scripts@latest

他們以前的版本是缺少一個JSON插件，它they just added to the rollup process。