我正在使用最新版本(Ionic 3xx和Angular 5)构建一个Ionic应用程序,并尝试将shuffleJS功能集成到其中进行过滤。当我在模板中通过“数据组”使用一些静态数据时,它工作正常。 HTML5 attr。
然而,当我尝试让每个项目的数据组'由JSON提要填充,我收到以下错误:
Uncaught Error: Template parse errors:
Can't bind to 'data-groups' since it isn't a known property of 'div'.
以下是HTML模板代码:
<ion-grid id="container">
<ion-row>
<ion-col col-2 *ngFor="let macro of allMacros" (click)="goToMacroDetailsPage(macro)" class="item">
<div class="item" [data-groups]="macro.cssClasses"></div>
<ion-card>
<img src="../assets/imgs/specimens/thumbs/{{macro.thumbnail}}.jpg"/>
<ion-card-content>
<ion-card-title>
{{macro.title}}
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
..以及JSON数据Feed的示例:
},
{
"title": "Caddisfly",
"cssClasses": "nonmicro noshell threepairs notail verySens",
"thumbnail": "caddisfly-th",
"featured_image": [
"caddisfly/caddisfly1",
"caddisfly/caddisfly2",
"caddisfly/caddisfly3"
],
"sensitivity": "Tolerant",
"phylum": "Anthropoda",
"class": "Insecta",
"order": "Trichoptera",
"family": "Twenty-six families",
"size": "1.5 – 40mm",
"habitat": "In sediment, on rocks and branches, and among algae and aquatic plants in streams, ponds and lakes",
"diet": "<strong>Carnivorous, herbivorous</strong> or <strong>detritivorous</strong> depending on species – algae scraped from the surface or surrounding rocks; material filtered from currents using specially constructed conical webs; insects and <strong>crustaceans</strong>",
"features": "Two main types, divided on the basis of behaviour and structure. One group constructs a portable case out of sand, algae, plant material and <strong>silt</strong> (cases often look like sticks) and are generally found in still waters where they feed on algae and plants. The second group does not have a case, or has a fixed retreat. Some are common in fast-flowing water where they feed on other animals (often building a net of silk across the stream to capture their food). Some <strong>species</strong> will swim in their case; most just crawl around. Some of the caseless will move away backwards"
},
我认为&#39;数据组&#39;根据HTML5标准 - https://www.w3schools.com/tags/att_global_data.asp,它将是受支持的数据属性。我似乎无法弄清楚我做错了什么,如果它是我必须做的Angular特定的事情(即导入一个模块)。
答案 0 :(得分:0)
尝试ng-attr-groups =“{{macro.cssClasses}}” https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes 希望它有所帮助!!
答案 1 :(得分:0)
将您的群组绑定如下,它应该可以正常工作
[attr.data基] = “macro.cssClasses”
我认为除了这个绑定问题之外,您的代码中几乎没有问题:
shuffjs中的数据组接受字符串数组,但是在cssClasses键下的appData.json文件中是一个字符串。
使用../../assets/imgs/specimens/thumbs/{{macro.thumbnail}}.jpg 而不是../assets/imgs/specimens/thumbs/{{macro.thumbnail}}.jpg来显示缩略图
如果有帮助,请告诉我。