Question

This is the response I am getting through my html document伙计们我想以离子形式以表格格式显示值。所以我正在使用网格来获得相同的输出。当解析来自json响应的数据时，我面临很多问题。我创建了一个json响应，并希望以表格格式显示值。这是我的json响应。

{
    "success": true,
    "data": [{
        "iMISParamCatID": "1",
        "vCatName": "Alerts",
        "iLocID": "1",
        "paramname": "-ve Batches",
        "fValue": "399.00"
    },, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "6",
        "paramname": "Discounts",
        "fValue": "367.48"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "7",
        "paramname": "Discounts",
        "fValue": "530.21"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "1",
        "paramname": "Owners",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "2",
        "paramname": "Owners",
        "fValue": "3869.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "3",
        "paramname": "Owners",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "4",
        "paramname": "Owners",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "5",
        "paramname": "Owners",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "6",
        "paramname": "Owners",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "7",
        "paramname": "Owners",
        "fValue": "343.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "1",
        "paramname": "Staff",
        "fValue": "547.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "2",
        "paramname": "Staff",
        "fValue": "1422.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "3",
        "paramname": "Staff",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "4",
        "paramname": "Staff",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "5",
        "paramname": "Staff",
        "fValue": "1294.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "6",
        "paramname": "Staff",
        "fValue": "175.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "7",
        "paramname": "Staff",
        "fValue": "1227.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "1",
        "paramname": "Margin",
        "fValue": "14.92"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "2",
        "paramname": "Margin",
        "fValue": "19.18"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "3",
        "paramname": "Margin",
        "fValue": "8.87"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "4",
        "paramname": "Margin",
        "fValue": "9.38"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "5",
        "paramname": "Margin",
        "fValue": "17.58"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "6",
        "paramname": "Margin",
        "fValue": "20.65"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "7",
        "paramname": "Margin",
        "fValue": "17.00"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "1",
        "paramname": "Profit",
        "fValue": "13227.30"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "2",
        "paramname": "Profit",
        "fValue": "91215.79"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "3",
        "paramname": "Profit",
        "fValue": "39471.89"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "4",
        "paramname": "Profit",
        "fValue": "27122.51"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "5",
        "paramname": "Profit",
        "fValue": "18488.92"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "6",
        "paramname": "Profit",
        "fValue": "13984.54"
    }, {
        "iMISParamCatID": "2",
        "vCatName": "Sales",
        "iLocID": "7",
        "paramname": "Profit",
        "fValue": "11667.46"
    }, {
        "iMISParamCatID": "6",
        "vCatName": "Accounts",
        "iLocID": "1",
        "paramname": "Register",
        "fValue": "69150.00"
    }, {
        "iMISParamCatID": "6",
        "vCatName": "Accounts",
        "iLocID": "2",
        "paramname": "Register",
        "fValue": "-1.00"
    }, {
        "iMISParamCatID": "6",
        "vCatName": "Accounts",
        "iLocID": "3",
        "paramname": "Register",
        "fValue": "1.00"
    }, {
        "iMISParamCatID": "6",
        "vCatName": "Accounts",
        "iLocID": "4",
        "paramname": "Register",
        "fValue": "25470.00"
    }, {
        "iMISParamCatID": "6",
        "vCatName": "Accounts",
        "iLocID": "5",
        "paramname": "Register",
        "fValue": "58819.00"
    }, {
        "iMISParamCatID": "6",
        "vCatName": "Accounts",
        "iLocID": "6",
        "paramname": "Register",
        "fValue": "42650.00"
    }, {
        "iMISParamCatID": "6",
        "vCatName": "Accounts",
        "iLocID": "7",
        "paramname": "Register",
        "fValue": "68228.00"
    }]
}

这是我的html文件

   <ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        Display Date
      </ion-col>
      <ion-col>
        #1
      </ion-col>

      <ion-col>
        #2
      </ion-col>

      <ion-col>
        #3
      </ion-col>
      <ion-col>
        #4
      </ion-col>
      <ion-col>
        #5
      </ion-col>
      <ion-col>
        #6
      </ion-col>
      <ion-col>
        #7
      </ion-col>
      <ion-col>
        Total
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        Category Name
      </ion-col><br>
    </ion-row>  
  </ion-grid>

  <ion-grid>
      <ion-row>
          <ion-col>
        Category Params 
          </ion-col>
          <ion-row *ngFor = "let category of data?.data">
          <ion-col>
            {{category.fValue}}
          </ion-col>
        </ion-row>
  </ion-row>
  </ion-grid>
</ion-content>

这是我的ts文件。

export class HomePage {
  posts: any;
  leaddetails: any;
  constructor(public navCtrl: NavController,
    private http: Http) {
    // window.open("http://google.com",'_system', 'location=yes');
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });

    this.http.post('http://url/foldername/file.php',options) 
    .map(res => res.json())
    .subscribe(data => {
      console.log("Api Fired",data);
    this.data = data;

       });

}

}

我只希望将值打印在列名下方，并且如我在上面的回复中所见，我需要打印vCatName和paramsname。我是离子学的初学者，我只需要指导。

Answer 1

export class HomePage {
posts: any;
leaddetails: any;

alldata: Observable<any>; //<-- this add first

并进入您的http帖子；

  .subscribe(data => {
  console.log("Api Fired",data);

  this.alldata = data; //<--this add

   });

稍后发布您的html文件；

 <ion-content>
   <ion-grid>
     <ion-row *ngFor="let item of alldata">
       <ion-col>
        {{item.iMISParamCatID}}
       </ion-col>
       <ion-col>
        {{item.vCatName}}
       </ion-col>
       <ion-col>
        {{item.iLocID}}
       </ion-col>
       <ion-col>
        {{item.paramname}}
       </ion-col>
       <ion-col>
        {{item.fValue}}
       </ion-col>
     <ion-row>
   <ion-grid>
 <ion-content>

我如何解析离子网格中的php值

1 个答案: