控制器的问题以某种方式阻止我的视图窗口小部件显示

时间:2016-12-07 12:19:26

标签: angular nativescript

我正在尝试使用标签和按钮显示一个非常简单的stackLayout。似乎我的控制器中的某些东西阻止小部件出现......我用另一个应用程序测试了这个视图代码,它工作正常。我对Nativescript很新,并不确定在哪里寻找问题。我在控制台或我的genimotion模拟器中没有任何错误。我只看到一个空白页面,顶部是应用程序的名称。知道我可以尝试找出导致这种情况的原因吗?

我的观看代码:(app.component.html)

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

我的控制器代码:

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 个答案:

答案 0 :(得分:1)

您可以使用templatetemplateUrl

您的组件正在使用内联 - template

如果要使用模板文件,请将该行更改为:

templateUrl: './app.component.html'