Angular 2指令及其属性
我有一个从示例API获取数据的简单应用程序。试图找出将指令定义为组件时的错误:Angular 2指令及其属性,angular,typescript,Angular,Typescript,我有一个从示例API获取数据的简单应用程序。试图找出将指令定义为组件时的错误: import {Component, View} from 'angular2/angular2'; @Component({ selector: 'article-item', properties: ['body'] }) @View({ template: `<p>{{ body }}</p>` }) export class ArticleItem { bod
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'article-item',
properties: ['body']
})
@View({
template: `<p>{{ body }}</p>`
})
export class ArticleItem {
body:string;
}
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);
由于某种原因,它给了我
意外的数字
错误。如何正确连接这两个组件?用自己的视图定义子组件是否合适?我认为问题在于,当您试图绑定子组件中的属性时,您设置的是数组而不是对象。因此,当它尝试为绑定属性创建setter时,它会迭代为组件的属性
键提供的值(iterableChanges
),但在您的情况下,它是一个数组而不是对象,因此为索引创建setter失败,例如:“0”
i、 e尝试:
@Component({
selector: 'article-item',
properties: {body: 'body'} //<-- Here
})
哇,谢谢!将属性声明为对象实际上是有效的。我想Angular 2目前还没有完整的文档。关于类型:是否有Post这样的类型?@user3115144没有内置的Post类型。您可以创建自定义类型。。这就是我的意思。。也请查看我的示例:)
interface Post extends ArticleItem{//or even class Post
title: string;
}