Question

这是我从REST API获得的JSON数据：

[{ “名字”：“sherwin”， “field2”：“value2”， “field3”：“value3”， “图片”： [{ “image”：“url1”，“image”：“url2”....}] “字段N”：“值N” }]

...我在页面上有以下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替换Image：

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

Nativescript：使用ListView从集合/数组中显示来自url数组的图像

1 个答案: