画像を読み込むことができません角2

Question

これに続いてdocが表示されますが、画像はUIに表示されません。私はチェックボックスを使用する必要があり、それは画像の助けを借りて行う必要があることをお読みください。だから私のチェックボックスのイメージは表示されません。どこが間違っていますか？

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

私はあなたがドキュメントのNativeScriptのコア部分を読んでいる、しかしNativeScript Angular2プロジェクトの詳細を説明してきた角部があることに気づきました。あなたは画像hereについてもっと読むことができます。あなたの質問に関しては、あなたのNS Angularプロジェクトで、この<Image src="{{checked ? 'res://icon' : ''}}"></Image>の種類のシンタックスを使用してシナリオの画像srcプロパティをバインドすることができます。

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--; 
    } 
}