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

Question

我正在尝试显示一个非常简单的带有标签和按钮的 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();
                    }
                });
            }
            });
    }

}

Answer 1

您可以使用 template 或 templateUrl !

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

如果您想使用模板文件，将该行更改为：

templateUrl: './app.component.html'

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

issue with controller somehow preventing my view widgets to show

nativescript

angular