草庐IT

关于 angular:Can\\’t 绑定到 \\’items\\’ 因为它不是 \\’virtual-scroller\\’ 的已知属性

codeneng 2023-03-28 原文

Can't bind to 'items' since it isn't a known property of 'virtual-scroller'

在我的 ionic 4 Angular 项目中实现虚拟滚动时遇到问题。

以前，我使用了 ionic 的虚拟滚动 (ion-virtual-scroll) 实现，它最初工作得很好，但遇到了一个可以说是它不支持我的应用程序所需的 ionic 网格视图的警告。
(Ionic 已经在他们的仓库中的"功能请求"下承认了这一点：https://github.com/ionic-team/ionic/issues/16632)

与此同时，我使用了 ngx-virtual-scroller (https://github.com/rintoj/ngx-virtual-scroller)，因为它提供了多列支持

但是，我在项目中使用时遇到了问题。

我已经通过 npm (npm install ngx-virtual-scroller --save) 安装了它，并在我的 app.module 中导入了 VirtualScrollerMoudle

app.module.ts

1
2
3
4
5
6
import { VirtualScrollerModule } from 'ngx-virtual-scroller'

imports: [
    ...
    VirtualScrollerModule
],

我已经在我的组件视图中将 virtual-scroller 标签包裹在我的元素周围

product-card-view.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<virtual-scroller #scroll [items]="productsArray">
 
    <ion-row>
      <ion-col size="6" *ngFor="let p of scroll.viewPortItems">
        <ion-card>
          <ion-card-header>
            {{ p.title }}
          </ion-card-header>
          <ion-card-content>
            ..... ETC .....
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
 
</virtual-scroller>

但是我收到了这个错误

控制台错误

core.js:9110 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'items' since it isn't a known property of 'virtual-scroller'.
1. If 'virtual-scroller' is an Angular component and it has 'items' input, then verify that it is part of this module.
2. If 'virtual-scroller' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

在寻找解决方案后，我遇到了遇到类似问题但使用 Ionic 3 (https://github.com/rintoj/ngx-virtual-scroller/issues/85) 和他们的其他人
解决方案是将 VirtualScrollMoudle 导入使用它的子模块而不是全局应用程序模块，并指示它可能需要做一些事情
对组件使用延迟加载。

不幸的是，我尝试这样做无济于事。我尝试仅将 VirtualScrollMoudle 导入到 app.module.ts，这是正在使用的组件的父页面模块
仅 virtual-scoller 并且两者同时出现，但遇到了相同的问题。

home.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { VirtualScrollerModule } from 'ngx-virtual-scroller'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    FontAwesomeModule,
    ProductSharedModule,
    HeaderFooterSharedModule,
    HideHeaderSharedModule,
    VirtualScrollerModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

我还确保导入语句位于底部，正如我所看到的那样，它已经成功吸引了很多人(包括过去的我自己)

有什么解决办法还是我遗漏了一些很明显的东西？

版本：

离子 4 (5.4.4)

angular：8.1.3

  • 尝试重新启动 ng serve 有时它不会获取对文件的更改。
  • 我试了一下，但遗憾的是没有运气，我尝试了全新的构建和 npm install 以确保它也已安装。 ionic 4 和这个模块之间可能有一个小怪癖
  • product-card-view 在哪个模块中声明？
  • 它通过共享模块在 home.module.ts 页面中声明，但我刚刚注意到该组件也出现在其他页面上，因为它包含在其他页面使用的共享模块中。我认为这不会导致此错误，但我可能会尝试将组件隔离到一页以查看结果
  • 您应该将滚动模块导入到声明使用它的组件的共享模块中。将其添加到其他模块不会使其可用。
  • 你说得对，我可以说这是漫长的一天，因为我还没有想过这样做：D 我会试一试，如果它有效，我会告诉你。感谢您的快速回复！

更新

非常感谢@Reactgular，我已经解决了这个问题！

由于我的 product-card-view.component 在共享模块中，我需要在共享模块中导入虚拟滚动模块，而不是在 app.module.ts 或父页面模块中单独导入

product-shared.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { VirtualScrollerModule } from 'ngx-virtual-scroller';

// Product card component
import { ProductCardViewComponent } from '../../components/products/product-card-view/product-card-view.component';

@NgModule({
  declarations: [ProductCardViewComponent],
  imports: [CommonModule, IonicModule, FontAwesomeModule, VirtualScrollerModule],
  exports: [ProductCardViewComponent]
})
export class ProductSharedModule { }

我会留下这个答案，希望它可以帮助将来遇到类似问题的任何人

8217ampnbspbrsectionangularionic-frameworktypescriptvirtualscroll

有关关于 angular:Can\\’t 绑定到 \\’items\\’ 因为它不是 \\’virtual-scroller\\’ 的已知属性的更多相关文章

  1. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  2. ruby CSV : How can I read a tab-delimited file? - 2

    CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件，我转到excel，并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗？ 最佳答案 尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|

  3. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

  4. CAN协议的学习与理解 - 2

    最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  5. ruby-on-rails - 只有当不是 nil 时才执行映射？ - 2

    如果names为nil，则以下中断。我怎样才能让这个map只有在它不是nil时才执行？self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案 其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e

  6. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

  7. ruby - 混帐 & ruby : How can I unset the GIT_DIR variable from inside a ruby script? - 2

    我编写了一个非常简单的“部署”脚本，作为我的裸git存储库中的post-updateHook运行。变量如下livedomain=~/mydomain.comstagingdomain=~/stage.mydomain.comgitrepolocation=~/git.mydomain.com/thisrepo.git(bare)core=~/git.mydomain.com/thisrepo.gitcore==addedremoteintoeachlive&stagegitslive和stage都初始化了gitrepos(非裸)，我已经将我的裸仓库作为远程添加到它们中的每一个(名为co

  8. ruby-on-rails - Rails 格式验证——字母数字，但不是纯数字 - 2

    什么是测试格式验证的最佳方法让我们说一个用户名，使用字母数字的正则表达式，但不是纯数字？我一直在我的模型中使用以下验证validates:username,:format=>{:with=>/^[a-z0-9]+[-a-z0-9]*[a-z0-9]+$/i}数字用户名(例如“342”)通过了验证，这是我不想要的。 最佳答案 您想“向前看”一封信:/\A(?=.*[a-z])[a-z\d]+\Z/i 关于ruby-on-rails-Rails格式验证——字母数字，但不是纯数字，我们在Sta

  9. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  10. ruby-on-rails - 在 Ruby 或 Rails 中，hash.merge({ :order => 'asc' }) can return a new hash with a new key. 什么可以返回带有已删除键的新散列？ - 2

    在Ruby(或Rails)中，我们可以做到new_params=params.merge({:order=>'asc'})现在new_params是一个带有添加键:order的散列。但是是否有一行可以返回带有已删除key的散列？线路new_params=params.delete(:order)不会工作，因为delete方法返回值，仅此而已。我们必须分3步完成吗？tmp_params=paramstmp_params.delete(:order)returntmp_params有没有更好的方法？因为我想做一个new_params=(params[:order].blank?||para

随机推荐