ionic2 .. TypeError：無法讀取屬性'查詢'爲空

所以我是IONIC2中的新手..我只嘗試過helloworld，它的工作..我有一個以前的經驗與Angular2和Typescript，但沒有以前的經驗離子。ionic2 .. TypeError：無法讀取屬性'查詢'爲空

我所試圖做的是通過此鏈接https://adamweeks.com/2016/05/11/creating-a-barcode-scanner-in-ionic-2-in-15-minutes/創建具有Ionic2一個BarcodeScanner，但是每當我測試瀏覽器我得到以下錯誤控制檯

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null

，我讀了一些插件可能沒有在瀏覽器上工作..所以我試圖部署在我的手機上（我之前設法使用helloworld示例），但是我所能看到的只是一個白色屏幕。

在我的應用程序中，我有兩個頁面掃描頁面,主頁。

你可能會發現下面的代碼。

Home.html中

<ion-navbar *navbar> 
    <ion-title> 
    Home 
    </ion-title> 
</ion-navbar> 

<ion-content class="home"> 
    <ion-card> 
    <ion-card-header> 
     Card Header 
    </ion-card-header> 
    <ion-card-content> 
     Hello World 
     <button block (click)="scan()">Scan</button> 
    </ion-card-content> 
    </ion-card> 
</ion-content>

Home.ts

import {Page, Platform, Alert, NavController, Toast} from 'ionic-angular'; 
import {BarcodeScanner} from 'ionic-native'; 
import {BarcodeData} from '../../classes/BarcodeData.ts'; 
import {ScanPage} from '../scanResult/scan'; 


@Page({ 
    templateUrl: 'build/pages/home/home.html' 
}) 
export class HomePage { 
    // static get parameters() { 
    //  return [[Platform], [NavController]]; 
    // } 
    platform:Platform; 
    navController:NavController; 

    constructor(platform, navController:NavController) { 
     console.log('hello'); 
     this.platform = platform; 
     this.navController = navController; 
    } 

    scan() { 
     BarcodeScanner.scan().then(
      (result) => { 
      console.log('result'); 
      console.log(result); 
      if (!result.cancelled) { 
       const barcodeData = new BarcodeData(result.text, result.format); 
       this.scanDetails(barcodeData); 
      } 
      return Promise.resolve(result); 
      }) 
     .catch((err) => { 
      let toast = Toast.create({ 
      message: 'Mmmm, buttered toast', 
      duration: 3000 
      }); 

      this.navController.present(toast); 
      return Promise.reject(err); 
     }) 
    } 

    scanDetails(details) { 
    this.navController.push(ScanPage, {details: details}); 
    } 
}

scan.html

<ion-list-header>Barcode</ion-list-header> 
<ion-item> 
{{ barcodeData.text }} 
</ion-item> 
<ion-list-header>Format</ion-list-header> 
<ion-item> 
{{ barcodeData.format }} 
</ion-item>

個scan.ts

import {Page, Platform, Alert, NavController, NavParams} from 'ionic-angular'; 
import {BarcodeData} from '../../classes/BarcodeData.ts'; 


@Page({ 
    templateUrl: 'build/pages/scanResult/scan.html' 
}) 
export class ScanPage{ 
    barcodeData: BarcodeData; 

    constructor(private nav: NavController, navParams: NavParams) { 
     this.barcodeData = navParams.get('details'); 
    } 
}

來源

2016-05-22 Abdel-Rahman Shoman

如果你在'static get parameters（）{...'中註釋會發生什麼？ –

@GünterZöchbauer它的工作..但我不明白爲什麼？ –

我不知道離子。您可以嘗試不使用'get parameters'，但是您必須在構造函數參數中提供一個類型，比如'constructor（platform：Platform，navController：NavController）{否則Angulars DI不知道要傳入哪個參數。參數類型在DI的註冊表中用作鍵。也許'get parameters'是'構造函數（@Inject（Platform）platform，...）'的替代品，可以用來指定DI的密鑰（如果沒有必要，不鼓勵） –

變化

constructor(platform, navController:NavController) {

到

constructor(platform:Platform, navController:NavController) {

Angulars DI需求的關鍵知道什麼對每個參數注入。這可以通過static get parameters() ...或向構造函數參數提供類型來定義。

來源

2016-05-22 18:00:39

ionic2 .. TypeError：無法讀取屬性'查詢'爲空

回答

相關問題