Angular2 http.get from.json文件：未定义错误

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

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

错误：原始异常：找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

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

 export class Activity {
    title: string;

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

我得到了一个用于显示activitylist的服务和一个组件：

服务：

@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'));
    }
};

data.json如下所示：

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

---

我认为您需要：

.map（（res:Response）=>res.json（））

因为您要为一个对象返回一个数组，但是您还需要将

data.json

放在项目中可由WebPack的开发服务器提供服务的位置。。。也许

/src/assets/data

？我试图重现您的问题：它似乎起作用了。谢谢您的回复。我使用plunk修改了我的代码，它可以正常工作。奇怪的是，我试图重现我的错误，但它不会再出错了。。基本上有三件事改变了：将get方法的调用放在构造函数中（这比放在ngOnInit中好吗？），json文件的位置和subscribe的编写。不管怎样，它现在似乎在工作，所以我可以继续学习@Brandon不是.map，它遍历所有json数据，使所有部分都成为活动，而不是活动[]，还是我完全错了？

map（）

只允许您遍历

result

，这是一个活动形状的对象数组。这就是为什么您需要将

res.json（）

转换为类型为

Activity

的数组的原因，我认为您需要：

.map（（res:Response）=>res.json（））

，因为您返回的是一个对象数组，但是您还需要将

data.json

放在项目中可以由WebPack的开发服务器提供服务的位置。。。也许

/src/assets/data

？我试图重现您的问题：它似乎起作用了。谢谢您的回复。我使用plunk修改了我的代码，它可以正常工作。奇怪的是，我试图重现我的错误，但它不会再出错了。。基本上有三件事改变了：将get方法的调用放在构造函数中（这比放在ngOnInit中好吗？），json文件的位置和subscribe的编写。不管怎样，它现在似乎在工作，所以我可以继续学习@Brandon不是.map，它遍历所有json数据，使所有部分都成为活动，而不是活动[]，还是我完全错了？

map（）

只允许您遍历

result

，这是一个活动形状的对象数组。这就是为什么需要将

res.json（）

强制转换为类型为

Activity

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

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