title: Angular 4 Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
body: <p>Here is the code below:</p>
  
  <h3>component.ts</h3>
  
  <p>by selecting match geting id in routing, then taking this id from URL</p>
  
  <pre><code>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)=&gt; {
    let id = +params['id'];
  
  
  
    this.matchService.getMatch(id).subscribe(
      resultArray =&gt; this._postArrayMatch = resultArray,
      error =&gt; console.log("Error ::" + error))
    })
   }
  </code></pre>
  
  <hr>
  
  <h3>component.html</h3>
  
  <p>just basic interpolation by doing ngFor loop</p>
  
  <pre><code> &lt;div *ngFor="let post of _postArrayMatch"&gt;
   &lt;p&gt;{{post.team1.name}}&lt;/p&gt;
   &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h3>service.ts</h3>
  
  <p>passing the dynamic id      </p>
  
  <pre><code> getMatch(id:number): Observable&lt;match[]&gt;{
      return this.http.get&lt;match[]&gt;(`http://localhost:3000/match/${id}`)
      }
  </code></pre>
  
  <p>interface</p>
  
  <pre><code>   export interface match{
       team1:{
        name:string,
        id:number
       }
       team2:{
        name:string,
        id:number
       }
     }
  </code></pre>