Nativescript-ng2 + Natiivescript壁畫

Question

我遵循指導原則，爲我的android應用程序使用nativescript-fresco和ng2 + nativescript，因爲每當我滾動一次以上時，就會崩潰。我使用的組件是一個顯示20個在線圖像的列表視圖。這些網址是通過一個可以工作的@Input指令從父組件傳遞來的。但是，當我切換到FrescoDrawee時，listview被渲染，但圖像不是。

下面是部分

<GridLayout columns="*,*,*,*,*,*,*,*,*" height="100" class="item" 
      xmlns:nativescript-fresco="nativescript-fresco"> 
    <ios> 
     <Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="ios-product-image" (tap)="details(data)"></Image> 
    </ios> 
    <android> 
     <!--<Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="android-product-image" (tap)="details(data)"></Image>--> 
     <nativescript-fresco:FrescoDrawee width="100" height="100" 
              [imageUri]="data.imageUrl" 
     ></nativescript-fresco:FrescoDrawee> 
    </android> 

    <StackLayout row="0" col="3" colSpan="5" (tap)="details(data)"> 
     <Label [text]="data.name" class="product-name"></Label> 
     <Label [text]="data.description" textWrap="true" class="product-description"></Label> 
     <GridLayout columns="*,*,*,*,*,*,*,*,*,*" class="increment-decrement" style="width: 100%; height: 20%; vertical-align: bottom"> 
      <Label [text]="data.price" class="product-price" col="0" colSpan="5"></Label> 
      <ios> 
       <Button text="-" col="5" colSpan="1" (tap)="dec()"></Button> 
       <Label [text]="count" col="6" colSpan="3" class="product-amount" ></Label> 
       <Button text="+" col="9" colSpan="1" (tap)="inc()"></Button> 
      </ios> 
      <android> 
       <Label text="-" col="5" colSpan="1" class="inc-dec" (tap)="dec()"></Label> 
       <Label [text]="count" col="6" colSpan="3" class="product-amount"></Label> 
       <Label text="+" col="9" colSpan="1" class="inc-dec" (tap)="inc()"></Label> 
      </android> 

     </GridLayout> 
    </StackLayout> 


    <ios> 
     <Button col="11" class="cart" colSpan="1"></Button> 
    </ios> 


    <android> 
     <Label col="11" class="cart" colSpan="1"></Label> 
    </android> 

    <Image src="~/media/ic_add_shopping_cart_white_24dp.png" col="11" 
      style="height: 20%; width: 20%;" (tap)="addToCart()"></Image> 

</GridLayout> 

HTML和這類型腳本

import { Component, OnInit, Input} from "@angular/core"; 
import LabelModule = require("ui/label"); 
import application = require("application"); 
import { RouterExtensions } from "nativescript-angular/router"; 
import { PublicVariables } from "../../shared/publicVariables"; 


@Component({ 
    selector:'product-list', 
    templateUrl: 'pages/products/product_list.html', 
    styleUrls: ['pages/products/product_list-common.css',  'pages/products/product_list.css'] 
}) 

export class ProductListComponent implements OnInit { 
    @Input() data: any; 
    private count=0; 

constructor(private routerExtensions: RouterExtensions) {} 

ngOnInit() { 

} 
details() { 
    this.routerExtensions.navigate(["/product/:id"]); 
    PublicVariables.currentProduct = this.data; 
} 
inc() { 
    ++this.count; 
} 
dec() { 
    if(this.count>0) { 
     --this.count; 
    } 
} 
} 

我是比較新的本地腳本，所以我的代碼可能不乾淨。 我已經將nativescript-fresco插件添加到我的項目中，並在AppModule中導入並初始化它。我不知道的是，除了FrescoDrawee標記之外，是否需要向組件本身添加任何內容，因爲我沒有在文檔中看到任何指示。

請幫我弄清楚我的代碼有什麼問題？

Answer 1

我認爲這個問題是帶有前綴，你可以使用它作爲：

<FrescoDrawee width="100" height="100" [imageUri]="data.imageUrl"></FrescoDrawee> 

而且爲完整起見，這是需要與角度使用時要添加到app.module.ts什麼：

import { TNSFrescoModule } from "nativescript-fresco/angular"; 
import fresco = require("nativescript-fresco"); 
import application = require("application"); 

if (application.android) { 
    application.onLaunch = function (intent) { 
    fresco.initialize(); 
    }; 
} 

@NgModule({ 
    imports: [ 
    TNSFrescoModule