Angular 7 *ngFor

Front-end
#1

Boa Tarde!!
então, consumi uma api no meu projeto, mas sempre que adiciono o *ngFor a div inteira do ngFor some.

HTML:

<div  *ngFor="let b of barcos$  | paginate: {itemsPerPage:10, currentPage: page} "> 
  <img class="card-img-top" src="../assets/img/boat1.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">{{ b?.barcos$ }}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
    </p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

<pagination-controls (pageChange)="page = $event">


  </pagination-controls>

COMPONENTS :

export class BarcoListComponent implements OnInit {


  barcos$: Barcos[] = [];
  barcoInscricao;

  constructor(private service: BarcoListService) { }


  getBarcos() {
    this.service.getAll()
      .subscribe(data => {
        this.barcos$ = data
        console.log(this.barcos$);
      })
  }


  ngOnInit() {
    this.barcoInscricao = this.service.getAll()
      .subscribe(dados => this.barcos$ = dados);

  }

  ngOnDestroy() {
    this.barcoInscricao.unsubscribe();
  }

alguém da uma luz ??? hahahah

#2

Tem dados no barcos$?

Se não me engano tem como tu dar um inspect na pagina e ver porque o div foi suprimido nos comentários que o Angular deixa no html.

#3

barcos$: Barcos[];

export interface Barcos {

id: Number;
nome: String;
pes: Number;
local: String;
nasci : String;
foto: String;

}