角度2の要素ポリマーに配列を補間するときのエラー

Question

配列型で作業するときに、ポリマーと角度2の間に問題があります。私が使用する場合

<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> 

：ポリマー中

全てが正しく動作し、私は、プロパティを定義するスクリプト・セクションIにおいて示されるいくつかの画像に配列型を使用するテンプレート

<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> 

を定義しますこれはポリマーアプリで、すべての作品。

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

問題は、角度2のアプリで使用していて、配列を補間しようとするときです。 ngOnInit法で

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

私は画像の値に設定します。

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

をしかし、クロムは、次のエラースロー：

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>