2016-12-07 34 views
1

非常に単純なstackLayoutをラベルとボタンで表示しようとしています。私のコントローラの何かがウィジェットの表示を妨げているようです...このビューコードを別のアプリケーションでテストしたところ、正常に動作しました。私はNativescriptを非常に新しくしていますが、どこで問題を探すべきかは不明です。私はコンソールや私のジェネリメーションエミュレータでエラーは出ません。私は一番上にアプリの名前の空白のページが表示されます。私はこれを引き起こしているものを理解しようとすることができますか?コントローラーで問題が発生して表示ウィジェットが表示されない

私の見解コード:(app.component.html)

<stackLayout> 
<label text="Scan or enter a barcode"></label> 
<button text="Scan Item" (scan)="scan()></button> 
</stackLayout> 

私のコントローラコード:あなたがtemplate OR templateUrlを使用することができますいずれか

import { Component, OnInit } from "@angular/core"; 
import { BarcodeScanner } from "nativescript-barcodescanner"; 
import { ProductModel } from './models/product'; 

import { RestService } from './services/rest.service'; 

let barcodeScanner = new BarcodeScanner(); 

@Component({ 
    selector: "my-app", 
    template : "<page-router-outlet></page-router-outlet>" 
}) 
export class AppComponent implements OnInit { 
    public barcode: number; 
    public product: ProductModel; 

    public constructor(private restService: RestService) { 

    } 

    submitBarcode(barcode: number){ 
    this.restService.getProduct(barcode) 
    .subscribe(
    (res) => { 
     this.product = new ProductModel(res.BaseURI, res.CustomError, res.ProviderName, res.RequestFormData, res.RequestURI, res.ResponseCode, res.AvgQty1, res.AvgQty2, res.AvgQty3, res.BarCode, res.Description, res.POSDescription, res.POSPrice, res.ProductCode, res.PurchCount, res.StockOnHand); 
     //console.log("returned product description: " + this.product.Description); 
     //console.log(res); 
    }, 
    (res) => { 
     console.log("failure" + res); 
    } 
    ); 
    //console.log("product: " + product); 

} 


    public scan() { 
     barcodeScanner.scan({ 
      formats : "EAN_13", 
      cancelLabel : "Stop scanning", 
      message : "Go scan something Use the volume buttons to turn on the flash", 
      preferFrontCamera : false, 
      showFlipCameraButton : false 
     }).then((result) => { 
      this.barcode = +result.text; 
      this.submitBarcode(this.barcode);   
     }, (errorMessage) => { 
      console.log("Error no scan" + errorMessage); 
     }); 
    } 

    public ngOnInit() { 
     let scanner = new BarcodeScanner(); 
     scanner.available().then((available) => { 
      if(available){ 
       scanner.hasCameraPermission().then((granted) => { 
        if (!granted){ 
         scanner.requestCameraPermission(); 
        } 
       }); 
      } 
      }); 
    } 

} 

答えて

1

お客様のコンポーネントは、インラインtemplateを使用しています。

あなたのテンプレートファイルを使用したい場合は、にその行を変更:

templateUrl: './app.component.html'

関連する問題