ng2 + Natiivescript로 Nativescript-fresco

Question

안드로이드 앱을 위해 ng2 + nativescript로 nativescript-fresco를 사용하는 지침을 따랐습니다. 두 번 이상 스크롤 할 때마다 충돌했기 때문입니다. 내가 사용하고있는 구성 요소는 20 개의 온라인 이미지를 표시하는 listview입니다. url은 부모 구성 요소에서 작동하는 @Input 지시문을 통해 전달됩니다. 그러나 FrescoDrawee로 전환하면 목록보기가 렌더링되지만 이미지는 렌더링되지 않습니다. 여기

구성 요소

<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