Question

我正在尝试制作一个简单的虚拟滚动工作。

以下是观点：

 <ion-list [virtualScroll]="items">
<ion-item-sliding *virtualItem="let item">
  <ion-item>
    <h2>{{ item.a }}</h2>
    <p>{{ item.b }}</p>
  <button item-right>View</button>
  </ion-item>
  <ion-item-options side="left">
    <button danger>
      <ion-icon name="ios-trash-outline"></ion-icon>
    </button>
    <button secondary>
      <ion-icon name="ios-build-outline"></ion-icon>
    </button>
  </ion-item-options>
</ion-item-sliding>
 </ion-list>

和组件：

import {Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    templateUrl: 'build/pages/dashboard/dashboard.html',
})
export class DashboardPage {

    items: any[] = [];

    constructor() {

        for (var i = 0; i < 20; i++) {
            this.items.push({ a: 1, b: 2 });
        }

    }
}

产生以下异常：

Unhandled Promise rejection: EXCEPTION: Error in build/pages/dashboard/dashboard.html:8:2
ORIGINAL EXCEPTION: No provider for Content!

好像我必须拥有虚拟滚动的提供程序。 documentation中没有任何内容表明我确实需要提供者。

有什么想法吗？感谢。

Answer 1

您忘记为每个ion-item-sliding声明变量。所以它应该是这样的：

<ion-content>    
   <ion-list [virtualScroll]="items">
      <ion-item-sliding *virtualItem="let item">
        <ion-item>
          <h2>{{ item.a }}</h2>
          <p>{{ item.b }}</p>
        <button item-right>View</button>
        </ion-item>
        <ion-item-options side="left">
          <button danger>
            <ion-icon name="ios-trash-outline"></ion-icon>
          </button>
          <button secondary>
            <ion-icon name="ios-build-outline"></ion-icon>
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
</ion-content>

请注意*virtualItem="let item"元素中的ion-item-sliding。这样，您可以为item数组中的每个元素创建一个items变量，然后您就可以访问其属性（item.a或item.b）;

Ionic2虚拟滚动没有内容的prodiver

1 个答案: