Question

当我想使用Array类型时，我在Polymer和Angular 2之间遇到了问题。

在Polymer中，一切正常，我定义了模板，我使用Array类型来显示多个图像

<template>    
 <button class="heading" aria-controls="collapse1" on-click="toggle">
  <template is="dom-if" if="[[images]]">
     <template is="dom-repeat" items=[[images]]>
        <img src="[[item]]" width="[[imageWidth]]" height="[[imageHeight]]"/>
     </template>
  </template>
  <span>[[title]]</span>
 </button>
<template>

在脚本部分中，我定义了属性：

<script>
Polymer({
  is: 'my-element',
  properties: {
    images: {
      type: Array
    },
    imageWidth: {
      type: String,
      value: "20"
    },
    imageHeight: {
      type: String,
      value: "20"
    },
    title: {
      type: String
      value: "Default title"
    }
  }
});
</script>

当我在Polymer应用程序中使用它时，一切正常。

<my-element title="Itinerary" images='["icon.png","icon2.png","icon3.png","icon4.png"]' imageWidth="100px" imageHeight="100px"></my-element>

问题是当我在Angular 2应用程序中使用它时，我尝试插入一个数组。

<my-element title="Itinerary" images='{{images}}' imageWidth="100px" imageHeight="100px"></my-element>

在ngOnInit方法中，我设置了图像的值：

images: string[]
ngOnInit() {
 this.images = ['icon1.svg', 'icon2.svg']
}

但是Chrome会抛出下一个错误：

polymer-micro.html:277 [dom-repeat::dom-repeat]: 
expected array for `items`, found icon1.svg,icon2.svg

我在这段代码中尝试了几处修改，但我找不到好的修改。拜托，有人可以帮我这个吗？

提前致谢！

Answer 1

使用花括号，你会得到一个字符串插值，并查看错误信息，这不是你想要的。

要实际传递对象，必须使用括号绑定：

<my-element ... [images]='images' ...></my-element>

将数组插入Angular 2中的元素聚合物时出错

1 个答案: