У меня есть модель:
export class AppComponent implements OnInit{
members = [];
constructor(private responseMembers:LobsterService) {
}
ngOnInit() {
this.responseMembers.getMembers().subscribe(responseMembers =>
this.members = responseMembers.members);
}
}
Моя служба:
@Injectable()
export class LobsterService {
constructor(private http:Http) {
}
private url:string = "http://localhost:4200/assets/data.json";
getMembers() {
return this.http.get(this.url).map((response: Response) => response.json());
}
А потом в моем компоненте:
export class AppComponent implements OnInit{
members = [];
constructor(private responseMembers:LobsterService) {
}
ngOnInit() {
this.responseMembers.getMembers().subscribe(responseMembers =>
this.members = responseMembers.members);
}
}
HTML приложения ##
<h1>
<h3>Organization: {{members.organization}}</h3>
<h4>Organization Location: {{members.location}}</h4>
<ul *ngFor="let member of members">
<li>{{member}}</li>
</ul>
</h1>
Мой Json:
{
"organization":"Lobster",
"location":"Austin",
"teams":[
{
"team":"Lobster Tech",
"location":"Amsterdam",
"members":[
{
"name":"Ben Samuel",
"age":29,
"imageUrl":"https://randomuser.me/api/portraits/men/30.jpg"
},
{
"name":"Ana James",
"age":39,
"imageUrl":"https://randomuser.me/api/portraits/women/68.jpg"
},
{
"name":"Edward Finn",
"age":23,
"imageUrl":"https://randomuser.me/api/portraits/men/83.jpg"
}
]
},
{
"team":"Lobster Ink",
"location":"Cape Town",
"members":[
{
"name":"Sam Jones",
"age":49,
"imageUrl":"https://randomuser.me/api/portraits/women/30.jpg"
},
{
"name":"Helen Anthony",
"age":26,
"imageUrl":"https://randomuser.me/api/portraits/women/48.jpg"
},
{
"name":"Gregg Best",
"age":21,
"imageUrl":"https://randomuser.me/api/portraits/men/23.jpg"
}
]
}
]
}
Это вызывает у меня ошибку. Невозможно найти другой поддерживающий объект "[объект объекта]" типа "объект". NgFor поддерживает привязку только к Iterables, таким как Arrays.
Что я делаю неправильно? Я просто хотел бы перебрать свойства команд, а также получить доступ к его дочерним элементам и их свойствам.