圖片無法加載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

回答

相關問題