Bild kann nicht geladen werden Winkel 2

Question

Ich folgte dieser doc, aber das Bild wird nicht auf der Benutzeroberfläche angezeigt. Ich muss Checkbox benutzen und ich lese, dass es mit Hilfe des Bildes getan werden sollte. Also mein Checkbox Bild erscheint nicht. Wo mache ich falsch?

import {Component, EventEmitter} from '@angular/core'; 
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router'; 
import {APP_ROUTER_PROVIDERS} from "../app.routes" 
import ImageModule = require("ui/image"); 
var ImageSourceModule = require("image-source"); 

var image = new ImageModule.Image(); 
image.imageSource = ImageSourceModule.fromResource("checkbox_checked"); 
//image.imageSource = ImageSourceModule.fromResource("checkbox_unchecked"); 

@Component({ 
selector: "checkbox", 
properties: ['checked : checked'], 
events: ['tap'], 
template: ` 
<StackLayout backgroundColor="#b3d9ff" width="300" height="550"> 

    <Label style="font-size : 20px" text="Choose contacts to sync"></Label> 
    <Image 
     [src]="checked ? 'res://checkbox_checked' : 'res://checkbox_unchecked'" 
     class="checkbox" 
     (tap)="onTap()" 
     dock="left"> 
    </Image> 
</StackLayout> ` 
}) 

export class SyncComponent{ 
public tap: EventEmitter<boolean> = new EventEmitter<boolean>(); 
public checked: boolean = false; 

constructor() { } 

public onTap(): void { 
    this.tap.next(this.checked); 
} 
} 

Answer 1

Ich habe bemerkt, dass Sie NativeScript Kernteil der Dokumentation lesen, jedoch ist es Angular Teil, wo haben die Besonderheiten für NativeScript Angular2 Projekt beschrieben. Sie könnten mehr über die Bilder lesen here. In Bezug auf Ihre Frage könnten Sie in Ihrem NS Angular-Projekt diese Art von Syntax verwenden, um die image src -Eigenschaft für Ihr Szenario zu binden.

app.component.html

<StackLayout> 
    <Label text="Tap the button" class="title"></Label> 
    <Image src="{{checked ? 'res://icon' : ''}}"></Image> 

    <Button text="TAP" (tap)="onTap()"></Button> 

    <Label [text]="message" class="message" textWrap="true"></Label> 
</StackLayout> 

app.component.ts

import {Component} from "@angular/core"; 

@Component({ 
    selector: "my-app", 
    templateUrl: "app.component.html", 
}) 
export class AppComponent { 
    public counter: number = 16; 
    public checked:boolean=false; 

    public get message(): string { 
     if (this.counter > 0) { 
      return this.counter + " taps left"; 
     } else { 
      return "Hoorraaay! \nYou are ready to start building!"; 
     } 
    } 

    public onTap() { 
     this.counter--; 
    } 
}