我正在尝试将Angular 2与Polymer一起使用,当我尝试在组件的HTML模板中使用iron-list
并使用静态字符串数组作为测试时,我得到了这个巨大的堆栈跟踪。
在我的组件中,我使用Vaadin的Elements来在Angular 2中使用Polymer元素
import {Component, OnInit} from "@angular/core";
import {PolymerElement} from '@vaadin/angular2-polymer'
import {CoursesService} from '../services/courses.service'
@Component({
selector: 'courses',
templateUrl: 'app/templates/courses.component.html',
directives: [PolymerElement('iron-list'), PolymerElement('iron-ajax')], // Originally tried iron-ajax but didn't pan out so well
providers: [CoursesService]
})
export class CoursesComponent implements OnInit {
coursesData;
constructor(coursesService: CoursesService) {
this.coursesData = coursesService.getCourses();
}
ngOnInit() {
}
}
我在这个服务中返回一个字符串数组,我试图显示但是抛出错误
import { Injectable } from '@angular/core';
@Injectable()
export class CoursesService {
constructor() { }
getCourses() : string[] {
return ["Course 1", "Course 2", "Course 3"]
}
}
然后是组件的模板,我尝试使用与组件TypeScript中的变量相同的变量。
<iron-list items="{{coursesData}}" as="item">
<template>[[item]]</template>
</iron-list>