将JSON信息绑定到ionic应用程序中的数据组

我正在用最新版本（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>

{{macro.title}}

..以及JSON数据馈送的示例：

   },
    {
      "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 &ndash; 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"
    },

}，
{
“标题”：“球虫”，
“cssClasses”：“非微型noshell三对notail verySens”，
“缩略图”：“caddisfly th”，
“特色图片”：[
“caddisfly/caddisfly1”，
“caddisfly/caddisfly2”，
“caddisfly/caddisfly3”
],
“敏感”：“宽容”，
“门”：“人类纲”，
“类”：“昆虫纲”，
“目”：“毛翅目”，
“家庭”：“二十六个家庭”，
“尺寸”：“1.5&ndash；40mm”，
“栖息地”：“在沉积物、岩石和树枝上，以及溪流、池塘和湖泊中的藻类和水生植物中”，
“饮食”：“肉食性、草食性或食腐性取决于物种&ndash；从表面或周围岩石上刮下的藻类；使用特制锥形网从洋流中过滤的物质；昆虫和甲壳动物”，
“特征”：“两种主要类型，根据行为和结构进行划分。一组用沙子、藻类、植物材料和淤泥建造便携式箱子（箱子通常看起来像棍子）它们通常生活在静水中，以藻类和植物为食。第二类没有病例，或有固定的退避地。有些常见于水流湍急的水中，它们以其他动物为食（通常在溪流上织一张丝网以捕捉它们的食物）.一些物种会在它们的箱子里游泳；大多数只是爬行。一些没有箱子的会向后移动。”
},

---

我认为根据HTML5标准，“数据组”应该是一个受支持的数据属性。如果我必须做某个角度特定的事情（即导入模块），我似乎无法找出我做错了什么。

尝试ng attr groups=“{{macro.cssClasses}”

---

希望能有帮助

像下面这样绑定您的组，它应该会起作用

[属性数据组]=“宏cssClasses”

我认为除了这个绑定问题之外，您的代码中几乎没有什么问题：

• shuffjs中的数据组接受字符串数组，但它是cssClasses键下appData.json文件中的字符串

• 在filter.html中，使用.././assets/imgs/samples/thumbs/{{macro.thumbnail}}.jpg 而不是../assets/imgs/samples/thumbs/{{macro.thumboil}}.jpg来显示您的缩略图

---

如果有帮助，请告诉我。

！==也就是说，

data-*

属性是定制的；它们未定义为元素的属性，但允许存在。可以使用插值来设置它们的值，但不能绑定到它们。（也就是说，你可以做

数据组=“{{macro.cssClasses}}”

）你这么说真有趣。我确实尝试过并且以前使用过您在@Claies中描述的方法，但我遇到了类似的错误“compiler.js:466 Uncaught error:Template parse errors:无法绑定到“groups”，因为它不是“div”的已知属性，当我不尝试使用绑定/插值，而只是手动输入字符串值（即数据组）时[“AngularJS”]）-这没有导致任何错误/失败。Ohh…@Claies，我终于理解了你的第一句话。是的，我使用的是AngularJS，而不是AngularJS（AngularV1）。谢谢，但不幸的是，我收到了相同的错误消息：（你能给我提琴什么的吗？谢谢你的建议，现在工作得好多了。是的，你是对的，我的代码需要进一步清理，我需要将cssClasses字符串拆分成一个单独的数组以便正确使用。很高兴知道它有帮助！