将JSON信息绑定到离子应用程序

时间:2018-02-09 23:18:11

标签: json html5 angular ionic-framework

我正在使用最新版本(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 &ndash; 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"
    },

我认为&#39;数据组&#39;根据HTML5标准 - https://www.w3schools.com/tags/att_global_data.asp,它将是受支持的数据属性。我似乎无法弄清楚我做错了什么,如果它是我必须做的Angular特定的事情(即导入一个模块)。

2 个答案:

答案 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文件中是一个字符串。

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

如果有帮助,请告诉我。