Question

我正在努力学习Angular。我阅读（大部分）ng-book2，接下来阅读了很多教程和文章。所以我想尝试编写一个基本的应用程序，然后再进行扩展。但是......我被卡住了很快。我想从.json文件中读取数据，并使用Observables将其显示在列表中。数据流和可观察数据的概念对我来说非常抽象，特别是因为除了3年的基础c＃学校教育之外我没有编程经验。

所以我试图通过为自己创建一个简单的示例（没有实际的API）来学习和理解，但我无法让它工作。我搜索了大量的文章和书籍，我得到了与他们所有例子完全相同的代码，所以我在这里显然遗漏了一些东西。一些帮助将不胜感激！

错误：ORIGINAL EXCEPTION：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables，例如Arrays。

现在好了代码（我使用ng-cli）。我制作了一个模型活动并保持简单：

 export class Activity {
    title: string;

    constructor(title: string){
        this.title= title;
      }
    }

我有1个服务和1个组件用于显示活动列表：

服务：

@Injectable()
export class ActivityService {
    constructor(private http: Http){}

    getActivities(): Observable<Activity[]> {
        return this.http.get('./data.json')
                        .map((res:Response)=><Activity>res.json())
                        .catch((error:any)=>Observable.throw(error.json().error || 'Server error'));
    }
};

组件：

@Component({
    selector: "app-activity",
    template:`
    <ul>
        <li *ngFor="let activity of activityList">{{activity.title}}</li>
    </ul>
    `
})

export class ActivityComponent implements OnInit {

    activityList: Activity[];
    errorMessage: string;


    constructor(private activityService: ActivityService){}

    ngOnInit() {
        this.activityService.getActivities()
                            .subscribe(
                                values=>this.activityList=values,
                                error=>this.errorMessage=<any>error);

        console.log(this.errorMessage);
    }
};

app.module.ts：

@NgModule({
  declarations: [
    AppComponent,
    ActivityComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule
  ],
  providers: [ActivityService],
  bootstrap: [AppComponent]
})

data.json看起来像这样：

[
  {"title": "activiteit1"},
  {"title": "activiteit2"}
]

来自.json文件的Angular2 http.get：未定义错误

0 个答案: