How to get http data and show on screen with Angular 2+

Question

I’m having trouble getting an angular request backend is returning right but I’m not able to put the variable in html.

app.compoonent.ts

import { Component } from '@angular/core';
import { CanLoad, Route } from '@angular/router'
import { AppService } from './app.service'
import { Logado } from './app.model'
import { Visitas } from './visitas.model'
import { trigger, state, style, transition, animate } from '@angular/animations'
import * as Rx from "rxjs/Rx";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('resultadoAnimacao', [
      state('ready', style({})),
      state('none', style({})),
      transition('void=>ready', [
        style({ opacity: 0, transform: 'translateX(-500px)' }),
        animate('900ms 0s ease-in')
      ]),
      transition('none => ready', [
        style({ opacity: 0, transform: 'translateX(-600px)' }),
        animate('900ms 0s ease-in')
      ]),
      transition('ready => none', [
        style({ opacity: 0, transform: 'translateX(-105px)' }),
        animate('900ms 0s ease-in')
      ]),

    ]),
    trigger('resultadoAnimacaoImg', [
      state('ready', style({})),
      state('none', style({})),
      transition('void=>ready', [
        style({ opacity: 0, transform: 'translateX(500px)' }),
        animate('900ms 0s ease-in')
      ]),
      transition('none => ready', [
        style({ opacity: 0, transform: 'translateX(600px)' }),
        animate('900ms 0s ease-in')
      ]),
      transition('ready => none', [
        style({ opacity: 0, transform: 'translateX(105px)' }),
        animate('900ms 0s ease-in')
      ]),

    ])
  ]
})
export class AppComponent {

  animationsState = 'ready'
  logado: any[];
  numeroVisitas: Visitas[];

  constructor(private appService: AppService) { }

  ngOnInit() {
    // this.usuarioLogado('');
    this.getVisitas();
  }
  title = 'app';
  canLoad(route: Route) {
    console.log(route.path)
  }

  getVisitas(){
    this.appService.visitas()
    .subscribe(numeroVisitas => this.numeroVisitas = numeroVisitas);   
  }
  usuarioLogado(pagina) {
    this.logado = [{ appName: navigator.appName, appVersion: navigator.appVersion, buildID: '', cookieEnabled: navigator.cookieEnabled, id: '', navegador: navigator.appCodeName, oscpu: navigator.platform, platform: navigator.platform, userAgent: navigator.userAgent, pagina: pagina }];
    this.appService.salvarLog(this.logado);
    console.log(navigator);

  }
}

app.service.ts

import {Injectable} from '@angular/core'
import {HttpClient,HttpHeaders} from '@angular/common/http'
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/operator/map'

import {Logado} from './app.model'
import {Visitas} from './visitas.model'

import{MEAT_API} from './app.api'
import { error } from 'selenium-webdriver';

@Injectable()
export class AppService{
    constructor(private http:HttpClient){}

    visitas(): Observable<Visitas[]> {
        return this.http.get<Visitas[]>('http://localhost/db/log.php?acao=getVisitas')
    }

    salvarLog(logado){

        return this.http.post('http://localhost/db/log.php',logado)
        .subscribe((data)=>{
            console.log('pegando retorno do backend ',data);
        },(error)=>{
            console.log('ERROR: ',error);
        });
    }
    clear(){

    }
}

visistas.modelts.

export interface Visitas {
    total: string
}

app.component.html

<!-- gostaria de mostrar o valor  -->
{{numeroVisitas}}