图片无法加载Angular 2

我跟着这个doc，但图像不显示在用户界面上。我需要使用复选框，我读到它应该在图像的帮助下完成。所以我的复选框图像没有出现。我在哪里做错了？图片无法加载Angular 2

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

来源

2016-07-15 kenkulan

'属性：'应该是'输入：'和'事件：'应该是'输出：'。 “属性”和“事件”自很长一段时间以来都被弃用了。 –

非常感谢。我对角度很陌生。我已经取代了他们，但仍然没有改变。有什么我仍然失踪？ – kenkulan

我没有想到这会解决你的问题。我不知道NativeScript。 'res：// ...'URL对我来说很奇怪，但可能是NS特有的 –

我注意到你正在阅读的文档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--; 
    } 
}

来源

2016-07-15 10:21:56

图片无法加载Angular 2

回答

相关问题