title: Displaying JSON Data in Angular Component
body: <p>I have a service that is getting data from the server</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from "rxjs/Observable";
  
  @Injectable()
  export class CardService {
  
      private url = "http://192.168.100.112:8080/angular";
  
    constructor(private http: HttpClient) { }
  
    getCards(): Observable&lt;any&gt;{
    return this.http.get&lt;any&gt;(this.url);
   }
  }
  </code></pre>
  
  <p>And it works fine with my component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { CardService } from '../../services/card.service';
  
  @Component({
      selector: 'cards-list',
      templateUrl: './card.component.html',
      styleUrls: ['./card.component.css']
    })
    export class CardComponent implements OnInit {
  
    private cardData: any;
  
    constructor(private svc: CardService) { }
  
    ngOnInit() {
      this.svc.getCards().subscribe(data =&gt;{
        this.cardData = data;
        console.log(this.cardData)
      })
    }
  }
  </code></pre>
  
  <p>The console is displaying the data I am trying to show on the app.component.html</p>
  
  <p>but the data is not being displayed on the website:</p>
  
  <p>appcomponent.html</p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
    &lt;h1&gt;
      Welcome to {{ title }}!
    &lt;/h1&gt;
    &lt;cards-list&gt;&lt;/cards-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>card.component.html</p>
  
  <pre><code>&lt;div *ngIf="cardData"&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let card of cardData"&gt;
         &lt;span&gt;{{card.name}}&lt;/span&gt;
         &lt;span&gt;{{card.id}}&lt;/span&gt;
         &lt;span&gt;{{card.progress}}&lt;/span&gt;
         &lt;span&gt;{{card.issue}}&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Does anyone know what I am doing wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/RHYxv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RHYxv.png" alt="enter image description here"></a></p>