角度4无法找到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到可迭代对象，例如数组

Question

Here is the code below:

component.ts

by selecting match geting id in routing, then taking this id from 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

just basic interpolation by doing ngFor loop

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

---

service.ts

passing the dynamic id

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

interface

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

Answer 1

Thats seems the easiest way i could find on how to get the data from objects.

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

component.ts

objectKeys = Object.keys;

Answer 2

Try something like this where you create the object in your response

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))
  })
 }

And then you can access ALL of your sub objects in your html

Component.html

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

Currently, with what you have you are hard coding for team 1, and if you want to do that then you shouldn't be using the *ngFor