typescript - Angular 2-direktiv och dess attribut

Jag har en enkel app som hämtar data från ett exempel-API. Försöker lista ut vad som är fel när jag definierar en direktiv som en komponent:

app.ts

import {Component, View, bootstrap, For} from 'angular2/angular2';
import {ArticlesSvc} from 'services/articlesSvc';
import {ArticleItem} from 'directives/ArticleItem';

@Component({
  selector: 'main-app',
  injectables: [ArticlesSvc]
})

@View({
  template: `<p *for="#post of posts">{{ post.title }} <article-item [body]="post.body"></article-item></p>`,
  directives: [For,ArticleItem]
})

class MainComponent {
  posts: Array<string>;

  constructor(articlesSvc: ArticlesSvc) {
    this.posts = [];

    articlesSvc.get('http://jsonplaceholder.typicode.com/posts').then((data) => {
       this.posts = data;
    });

  }

}

bootstrap(MainComponent);

Och här är ArticleItem-komponenten:

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'article-item',
  properties: ['body']
})

@View({
  template: `<p>{{ body }}</p>`
})

export class ArticleItem {
    body:string;
}

Av någon anledning ger det mig Unexpected number-fel. Hur ansluter man dessa två komponenter på rätt sätt? Och är det ett korrekt sätt att definiera en underkomponent med dess egen vy?

Svar #1

Jag tror problemet är att när du försöker binda egenskaperna i din barnkomponent, så sätter du en array istället för ett objekt. Så när den försöker skapa settaren för de bundna egenskaperna, itererar den genom värdet (iterableChanges) som tillhandahålls för properties-nyckeln i Component, men i ditt fall är det en array istället för ett objekt, så att skapa en setter för indexet, t.ex.: "0", misslyckas.

d.v.s. försök:

@Component({
  selector: 'article-item',
  properties: {body: 'body'} //<-- Here
})

En annan anteckning, förmodligen ett skrivfel (och irrelevant för detta exempel): Din huvudkomponents klass post-egenskap deklareras som typen Array<string> istället för förmodligen Array<Post> (bara för att vara typ-säker :) ):

interface Post extends ArticleItem{//or even class Post
    title: string;
}

Plnkr