离子虚拟滚动没有内容提供者

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>

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

离子虚拟滚动没有内容提供者

Ionic2 virtual scroll no prodiver for content

typescript

ionic2

angular