图像无法加载Angular 2

Question

我按照doc进行了操作，但图片并未显示在用户界面上。我需要使用复选框，我读到它应该在图像的帮助下完成。所以我的复选框图片没有出现。我在哪里做错了？

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核心部分，但是有Angular部分，其中已经描述了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--;
    }
}