ionic2 讀取 server json資料，並轉換成QRCode供使用者掃描

1.json資料

[
    {
        "Id": 1,
        "ShopId": "BS042",
        "Active": 1,
        "Description": "這是第一筆最新訊息-for BS042特店",
        "ModifyDateTime": "2017-11-26T10:41:47",
        "UserAcct": null,
        "UserStatus": 0,
        "Image": "https://www.xxx.com.tw/testWeb/img/img2.png"
    },
    {
        "Id": 2,
        "ShopId": "BS042",
        "Active": 1,
        "Description": "這是第2筆最新訊息-for BS042特店",
        "ModifyDateTime": "2017-11-26T10:41:33",
        "UserAcct": null,
        "UserStatus": 0,
        "Image": "https://www.xxx.com.tw/testWeb/img/img2.png"
    }
]

2.讀取server json資料
檔名: list-master.ts

import { Component } from '@angular/core';
import { IonicPage, ModalController, NavController } from 'ionic-angular';
import { Item } from '../../models/item';
import { Items } from '../../providers/providers';
import { Api } from '../../providers/providers';

@IonicPage()
@Component({
  selector: 'page-list-master',
  templateUrl: 'list-master.html'
})
export class ListMasterPage {
  currentNews: Item[];

  constructor(public navCtrl: NavController, public items: Items, public modalCtrl: ModalController,
    private api: Api) {
    this.currentItems = this.items.query();
    
    let postParams = {
      ShopId : 'BS042',
      UserAcct : 'grace',
      Lang : 'zh'
    }
    let seq = this.api.post('getReq.jsp', postParams).share();
    seq.subscribe((res: any) => {
        this.currentNews = res;        
    }, err => {
        console.error('ERROR', err);
    });
  }
  
  openNews(item: Item) {
    this.navCtrl.push('QrcodePage', {
      item: item
    });
  }
}

3.顯示json資料
檔名: list-master.html

  
<ion-header>
  <ion-navbar>
    <ion-title>最新消息</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let item of currentNews">
      <button ion-item (click)="openNews(item)">
        <ion-avatar item-start>
          <img [src]="item.Image" />
        </ion-avatar>
        <h2>{{item.Description}}</h2>
        <p>{{item.Active}}</p>
        <ion-note item-end *ngIf="item.UserStatus">{{item.UserStatus}}</ion-note>
      </button>
    </ion-item-sliding>
  </ion-list>
</ion-content>

4.顯示QRCode碼
檔名: qrcode.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@IonicPage()
@Component({
  selector: 'page-qrcode',
  templateUrl: 'qrcode.html'
})
export class QrcodePage {
  encodeData2 : string = '';
  
  constructor(public navCtrl: NavController, public navParams: NavParams, private qrScanner: QRScanner) {
    if (navParams.get('item')) {
        let item = navParams.get('item');
        this.encodeData2 = 'Id=' + item.Id + '&ShopId=' + item.ShopId + '&UserAcct=' + 'grace';
    }
  }
}

檔名: qrcode.html

 
<ion-header>
 <ion-navbar>
     <ion-title text-center>QRCode</ion-title>
 </ion-navbar>
</ion-header>
<ion-content padding>
   <ion-card>
        <ion-card-header class="text-c">
            <ion-input type="text" [(ngModel)]="encodeData2" name="encodeData2" placeholder="請輸入QRCode"></ion-input>
        </ion-card-header>
        <ion-card>
            <qrcode [qrdata]="encodeData2" [size]="256" [level]="'M'"></qrcode>
        </ion-card>
    </ion-card>
</ion-content>