Question

<ion-virtual-scroll [items]="churchNewsList" approxItemHeight="120px">
        <ion-item *virtualItem="let news">
          {{ news }}
        </ion-item>
</ion-virtual-scroll>

我收到此错误

Can't bind to 'items' since it isn't a known property of 'ion-virtual-scroll'.
1. If 'ion-virtual-scroll' is an Angular component and it has 'items' input, then verify that it is part of this module.
2. If 'ion-virtual-scroll' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

如上所述如何将其包含在NgModule中。 Official Doc未声明任何类似内容。

Answer 1

我以这种方式解决了这个问题，我认为它将为您提供帮助。

在html文件中：

<ion-content padding>
  <div scrollY="true" id="scroll-list">
    <ion-list *ngFor="let item of list">
      <ion-item>
       {{ item }}
      </ion-item>
    </ion-list>
  </div>

</ion-content>

在scss文件中：

#scroll-list{
height: 200px;

}

Answer 2

此问题是由于“ CUSTOM_ELEMENTS_SCHEMA ”错误引起的，这可能是您遇到的第二个错误...

要解决，请将以下内容添加到app.module.ts

import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

第二点将使该部分看起来像：

@NgModule({
  declarations: [    MyApp,    AboutPage,    ContactPage,    HomePage,    TabsPage
  ],
  imports: [    BrowserModule,    IonicModule.forRoot(MyApp)  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  bootstrap: [IonicApp],
  entryComponents: [    MyApp,    AboutPage,    ContactPage,    HomePage,    TabsPage  ],
  providers: [    {provide: ErrorHandler, useClass: IonicErrorHandler}  ]
})

Answer 3

我有一个类似的问题，但是搜索发现ion-scroll不再存在，可以使用div

上面的css可以像下面这样实现

div[scrollx=true],div[scrolly=true] {
  position: relative;
  overflow: hidden;
}

div[scrollx=true] {
  overflow-x: auto;
}

div[scrolly=true] {
  overflow-y: auto;
}

该解决方案来自Ionic Team，您会在here中看到

离子虚拟滚动不是一个已知的元素

3 个答案: