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