如何调用对象值离子2 [英] how to call object value ionic 2

问题描述

完成api呼叫后。在我的数据库中，我有一组json对象值。结构如下所示：

After done the api calling. In my db I have set of json object values. The structure is look like this :

{
  "status": 1,
  "message": "List Successfully fetched",
  "CatgeoryList": [
    {
      "CatID": "10"

    },
{
      "CatID": "30"

    },
{

     "CatID": "0"

    }]
}

我做过api调用。我得到 status == 1 。我可以在 CatgeoryList 下打印所有对象值。但我想打印所有 catID UNDER IN CatgeoryList 。我无法得到。

I have done api calling. And i get the status == 1. And i can print all the object values under in CatgeoryList. But i want to print all the catID UNDER IN CatgeoryList. i was not able to get.

这里我的代码：

this.authService.categ(this.loginData).then((result) => {
      this.loading.dismiss();
      this.data = result;

       if(this.data.status == 1)
       {
       this.Catdata = this.data.CatgeoryList;  
      console.log(this.Catdata);  // i am getting all data

      this.Catdatanames = this.Catdata.CatID;  // not working
      console.log(this.Catdata.CatID); // not working
}
}

我想获得 catID CatgeoryList 。

更新：

更新 home.html：

  <div class="item item-body no-padding" style="border-width: 0px !important;">  

  <div class="row no-padding"  *ngFor="let data of Catdata;let i = index" (click)="opndetailpage()">
     <ng-container *ngIf=" i % 2 === 0">

          <div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{Catdata[i].CategoryName}}</span></div>
            </div>

            <div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
                 <div class="custom-design1"><span class="grid-title">{{Catdata[i+1].CategoryName}}</span></div>
             </div>


     </ng-container>
</div> 


</div>

home.ts

constructor(
    public alertCtrl: AlertController,
    public app: App,
    public loadingCtrl: LoadingController,
    public modalCtrl: ModalController,
    public navCtrl: NavController,
    public toastCtrl: ToastController,
    public confData: ConferenceData,
    public user: UserData,
    public http:Http,
    public authService: AuthService
  ) {

this.showLoader();
    this.authService.categ(this.loginData).then((result) => {
      this.loading.dismiss();
      this.data = result;

       if(this.data.status == 1)
       {
       this.Catdata = this.data.CatgeoryList;


           for(let i=0; i<this.Catdata.length; i++) {
               console.log(this.Catdata[i].CategoryName);
           }



       }

       else if(this.data.status == 0) {

     let alert = this.alertCtrl.create({
    title: 'Error',
    subTitle: 'Please Enter Valid Username & Password',
    buttons: ['OK']
  });
  alert.present();
       }

    }, (err) => {
      this.loading.dismiss();

    });     

  }

我的 takeexam.html

   <ion-buttons>
 <button (click)="canceltap()" style="font-size: 15px;text-transform: none;" ion-button>Cancel
    </button>
    </ion-buttons>

my takeexam.ts

canceltap() {
   // this.navCtrl.pop();
    console.log("pop tap");
    this.navCtrl.setRoot(TabsPage);  .// this is my home page


  }

所以当我按下 takeexam.html 中的取消按钮时，它会进入tabp [age.html（主页）。但是没有数据显示。我只是尝试在我的主页上使用硬编码一些值。那个时候我按下取消按钮显示所有数据。

so when i press cancel button in takeexam.html its going to tabp[age.html ( home page). But in that no data are showing. I just tried with hard code some value in my home page. That time when i press cancel button its showing all data.

所以我发现问题在于在ionviewdidload或其他一些中显示数据。我试过。 ionViewDidEnter ionDidLoad 。但没有任何作用

so i found the problem is in shoing the data in ionviewdidload or some other. i tried.ionViewDidEnter ionDidLoad. but nothing works

推荐答案

由于 this.data.CatgeoryList 是一个数组，你需要使用一个循环来对每个项目做一些事情

Since this.data.CatgeoryList is an array, you'll need to use a loop to do something with each item

this.authService.categ(this.loginData).then((result) => {
      this.loading.dismiss();
      this.data = result;

       if(this.data.status == 1) {
           // this.Catdata is an array
           this.Catdata = this.data.CatgeoryList;

           // Use a loop to print the items
           for(let i=0; i<this.Catdata.length; i++) {
               console.log(this.Catdata[i].CatID);
           }
       }
}

如果你想在视图中显示它，你可以像这样使用ngFor

And if you want to show it in the view, you can use ngFor like this

<ion-list>
    <ion-item *ngFor="let item of Catdata">
        {{ item.CatID }}
    </ion-item>
</ion-list>

更新

但是如果我想通过onclikc获取catID。意味着我需要将
传递给我的另一个页面意味着。离子2（点击）如何通过
这个catID到下一页

But if i want to get the catID by onclikc. MEANS that i need to pass that catID to my another page means. Ionic 2 by (click) how can i pass this catID To next page

更新视图

<ion-list>
    <ion-item (click)="showDetails(item.CatID)" *ngFor="let item of Catdata">
        {{ item.CatID }}
    </ion-item>
</ion-list>

您可以在组件代码上添加新方法

You can add a new method on the component code

public showDetails(catId: any): void {
    this.navCtrl.push(AnotherPage, { catId: catId });
}

在第二页的构造函数中，使用<获取数据a href =https://ionicframework.com/docs/api/navigation/NavParams/\"rel =nofollow noreferrer> NavParams

And in the second page, in the constructor, get the data by using NavParams

constructor(public params: NavParams){
   // userParams is an object we have in our nav-parameters
   this.catId = this.navParams.get('catId')
 }

这篇关于如何调用对象值离子2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！