首页 文章

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

提问于
浏览 次
0

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

[{“name”：“sherwin”，“field2”：“value2”，“field3”：“value3”，“images”：[{“image”：“url1”，“image”：“url2”...... . }]“fieldN”：“valueN”}]

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

...但问题是填充列表项后图像不显示 . 然而，“标签”正在展示 . 我在代码隐藏中尝试了data / observable：

export类MainComponent扩展Observable实现OnInit，AfterViewInit {private propertyList = new ObservableArray（）; ......这里有其他一些代码

但我不会去任何地方 .

需要帮忙 .

image listview observable nativescript

1 回答

  • 0

    我在最新的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>
    回复于

相关问题