Рендеринг данных перед компонентом

Question

Я хочу использовать загрузку данных из службы HttpClient в шаблоне html, но похоже, что данные отображаются после компонента, поэтому я использую директиву ngIf для решения проблемы, но она не работает! Любая помощь ?

Component.ts:

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MyserviceService } from '../myservice.service';

@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit {
ngOnInit() {
this.getBook()

}

constructor(private service : MyserviceService) {
}

Booknames :any

getBook () {
return  this.service.getBookNames().subscribe((data)=> {this.Booknames = data , 
  console.log(this.Booknames)}) ;
}}

Компонент. html:

<div class="example-container">
  <mat-form-field appearance="fill">
      <mat-label>Enter your name</mat-label>
         <input matInput>
  </mat-form-field>
  <mat-form-field appearance="fill">
    <mat-label>Name-linechart</mat-label>
       <input matInput>
 </mat-form-field>

  <mat-form-field *ngIf="BookNames">
    <mat-label>xAxis-linechart</mat-label>
    <mat-select >
      <mat-option  *ngFor="let book of BookNames" >
        {{book}}
      </mat-option>
    </mat-select>
  </mat-form-field> 

Когда я запускаю его поле "xAxis -линчарт "не появляется!

Answer 1

Я заменяю * ngIf = "Booknames" на * ngIf = "BookNames", я делаю то же самое для * ngFor, и это работает! :)