如何让ng-template在离子2项目中工作

时间:2017-06-06 07:42:39

标签: angular ionic2

我以前曾尝试将虚拟滚动用于一系列具有不同数量项目的卡片。虚拟滚动条不适用于我的卡片,建议我尝试ng-template在终端中给我一个错误说明:

  

错误:模板解析错误:[01:38:47]' ng-template'不是一个   已知元素:[01:38:47] 1.如果' ng-template'是一个角色   组件,然后验证它是否是该模块的一部分。 [01:38:47] 2。   如果&nbsp-template'是一个Web组件,然后添加" CUSTOM_ELEMENTS_SCHEMA"   到了' @ NgModule.schemas'这个

我尝试让虚拟滚动工作的其他解决方案给我留下了一个空白的白色未渲染的页面,这很奇怪,因为您认为如果终端会有错误告诉我我和构建将失败。我想弄清楚如何让ng-template为我工作。谷歌搜索没有足够的例子。 这就是我最初使用virtualScroll的方式,这是错误的方法。我已尝试交换div和list元素以放置virtualScroll属性,并得到相同的空白页结果。

HTML

<ion-content id="content">
   <ion-card id="card" *ngFor="let event of listOfEvents 
     [virtualScroll]="listOfEvents">          
     <ion-item *virtualItem="let event"> 
       <ion-row>
         <ion-col>
           <span class="showDetails">Guests Needed:</span> {{event.guests}}
         </ion-col>
         <ion-col>
           <span class="showDetails">Cover:</span> {{event.coverCharge}}
         </ion-col>
         <ion-col>
           <span class="showDetails">Drink Min:</span>{{event.drinkMin}
         </ion-col>   
       </ion-row> 
    </ion-item>
  </ion-card>   
</ion-content>

2 个答案:

答案 0 :(得分:1)

<ng-template>元素已在角度版本4.0.0-rc.1中引入。您应该更新到最新的角度版本(建议),或使用<template>标记

答案 1 :(得分:1)

Angular4已将 模板 组件重命名为 ng-template 。当你仍在使用angular2时,你也有可能得到这个错误,但也依赖于某些依赖于angular4的包。

跑步

  

npm update

更新为Angular 4,你应该没问题。