Угловой 4 Не удается найти другой поддерживающий объект '[object Object]' типа 'object'.NgFor поддерживает только привязку к итерациям, таким как массивы

Question

Вот код ниже:

component.ts

, выбрав соответствующий идентификатор для получения в маршрутизации, а затем взяв этот идентификатор из URL

export class MatchComponent implements OnInit {
_postArrayMatch: match[];

 constructor(public router:Router, private matchService: MatchService, 
 private route: ActivatedRoute) {}

 ngOnInit(){
 this.getMatchId();
 }

 getMatchId() :void {
 this.route.params.forEach((params: Params)=> {
  let id = +params['id'];



  this.matchService.getMatch(id).subscribe(
    resultArray => this._postArrayMatch = resultArray,
    error => console.log("Error ::" + error))
  })
 }

---

component.html

просто базовая интерполяция с помощью цикла ngFor

 <div *ngFor="let post of _postArrayMatch">
 <p>{{post.team1.name}}</p>
 </div>

---

service.ts

передача динамического идентификатора

 getMatch(id:number): Observable<match[]>{
    return this.http.get<match[]>(`http://localhost:3000/match/${id}`)
    }

интерфейс

   export interface match{
     team1:{
      name:string,
      id:number
     }
     team2:{
      name:string,
      id:number
     }
   }

Answer 1

Попробуйте что-то вроде этого, когда вы создадите объект в своем ответе

component.ts

export class MatchComponent implements OnInit {
_postArrayMatch: match[];
newArr: Array<Object> = [];

 constructor(public router:Router, private matchService: MatchService, 
 private route: ActivatedRoute) {}

 ngOnInit(){
   this.getMatchId();
 }

 getMatchId() :void {
  this.route.params.forEach((params: Params)=> {
  let id = +params['id'];



  this.matchService.getMatch(id).subscribe(
    resultArray => {
      this._postArrayMatch = resultArray;
      const keys = Object.keys(this._postArrayMatch) // new stuff starts here
      for(let i = 0; i < keys.length; i++) { 
        newArr.push(this._postArrayMatch[keys[i]]);
        newArr[i]['team'] = keys[i];
      }
    },
    error => console.log("Error ::" + error))
  })
 }

И тогда вы сможете получить доступ ко ВСЕМ вашим подобъектам вваш html

Component.html

 <div *ngFor="let post of newArr">
  <p> {{post.team}}: {{post.name}}</p>
 </div>

В настоящее время с тем, что у вас есть, вы жестко программируете команду 1, и если вы хотите это сделать, то вам не следуетне использовать *ngFor

Answer 2

Это, кажется, самый простой способ найти данные из объектов.

<div *ngFor="let post of objectKeys(_postArrayMatch.team1)">
  <div>  Team1: {{ _postArrayMatch.team1[post]}}</div>
</div>  

component.ts

objectKeys = Object.keys;