I can not render the API data in Angular2

I have my Contacts component, but I can not show the names of the array in the view, which is wrong in my code.

ContactsList.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Component({
  selector: 'app-gatolista',
  templateUrl: './gatolista.component.html',
  styleUrls: ['./gatolista.component.css']
})
export class GatolistaComponent implements OnInit {
  private apiUrl = 'http://addressbook-api.herokuapp.com/contacts';
  public contactos;
    constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get(this.apiUrl)
    .subscribe(data => {
        this.contactos = data;
    });
  }

}

contacts.html

<div class="card">
    <div *ngFor="let contacto of data.contacts">
        <h3>{{contacto.first}}</h3>
    </div>
</div>