Angular pokazywanie danych w czasie rzeczywistym

import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {Currencies} from "../model/currencies";

@Injectable({
  providedIn: 'root'
})
export class ExchangeRateService {

   baseUrl :string ="http://localhost:8180";
  constructor(private  http:HttpClient) { }
  getCurrencies() : Observable<Currencies> {
    return this.http.get<Currencies>( this.baseUrl);
  }
}

import {Component, Input, OnInit} from '@angular/core';
import {ExchangeRateService} from "../services/exchange-rate.service";
import {Observable} from "rxjs";
import {Currencies} from "../model/currencies";

@Component({
  selector: 'app-exchange-rate',
  templateUrl: './exchange-rate.component.html',
  styleUrls: ['./exchange-rate.component.css']
})
export class ExchangeRateComponent implements OnInit {
  currencies$: Observable<Currencies>;
  constructor(private exchangeRateService:ExchangeRateService) { }

  ngOnInit() {

    this.currencies$ = this.exchangeRateService.getCurrencies();
  }

}

<div  class="col-md-7">{{currencies$.publicationDate |async}}</div>// wyświetla błąd 
<div *ngFor="let c of currencies$.items | async" class="col-md-7">// wyświetla błąd 
<ul class="list-group">
 <li class="list-group-item">Author: {{c.id}}</li>
 <li class="list-group-item">Comments: {{c.description}}</li>
</ul>

import {Currency} from "./currency";

export class Currencies {
  public publicationDate; string ;
  public items:Currency[];
}

export class Currency {

public name:string ;
public code:string ;
public unit:number;
public purchasePrice:number;
public sellPrice:number;
public averagePrice:number;
}