Nativescript：コレクション/配列からURL配列から表示画像リストビュー

Question

を使用して、この私がRESTのAPIから取得したJSONデータ：

[{ 「名」：「シャーウィン」、 「フィールド2」："image"： "url1"、 "image"： "url2" ....} "fieldN"： "valueN"、 "value2" }]

...と私は、ページ上の次のListItemを持っている：

<ListView [items]="propertyList" class="image-list" (loaded)="onListViewLoaded($event)"> 
    <ng-template let-item="item"> 
     <StackLayout style="height: 200" (tap)="onItemTap(item.id)" 
     id="{{item.id}}" (loaded)="onItemLoaded($event, item.images)"> 
     <StackLayout class="image-container"> 
      <Image [src]="item.images[0].image" stretch="aspectFill" class="image-content-container"></Image> 
     </StackLayout> 
     <StackLayout class="image-caption-container"> 
      <Label id="{{item.id}}" 
      [text]="item.propertyName" 
       class="image-caption"></Label> 
      <Label class="gh-list-description-sub" text="{{item.propertyType}}" textWrap="true"></Label> 
     </StackLayout> 
     </StackLayout> 
    </ng-template> 
    </ListView> 

...しかし、問題は、リスト項目が入力された時点では表示されないという問題です。しかし、「ラベル」は表示されていました。私はコードビハインドでデータ/オブザーバブルを試しました：

エクスポートクラスMainComponentはObservableの実装を拡張します。OnInit、AfterViewInit { private propertyList = new ObservableArray（）; ...ここの他のコード

しかし、私はどこにも行きません。

ヘルプが必要です。

Answer 1

最新のNativeScriptバージョン3.1のListViewでImageを使用していくつかの奇妙な動作が見られました 画像が上下にスクロールするまで表示されません!!

回避策として、nativescript-web-image-cacheプラグインのWebImageコンポーネントを使用できます。

まずそれをインストール：

tns plugin add nativescript-web-image-cache 

は、あなたのルートコンポーネントAppComponentにプラグインを初期化し、app.component.ts：あなたのテンプレートで

import { Component } from "@angular/core"; 
import { OnInit } from '@angular/core/core'; 
import { initializeOnAngular } from 'nativescript-web-image-cache'; 

@Component({ 
    selector: "ns-app", 
    templateUrl: "app.component.html", 
}) 

export class AppComponent implements OnInit { 
    ngOnInit():void { 
     initializeOnAngular(); 
    } 
} 

がWebImageで画像を置き換える：

<StackLayout class="image-container"> 
      <WebImage [src]="item.images[0].image" stretch="aspectFill" class="image-content-container"></WebImage> 
     </StackLayout>