Angular 2+ Данные не будут отображаться, пока не будет нажата не связанная кнопка с функцией

Question

У меня есть обзор счетов, по которым пользователь может щелкнуть

ShowInvoiceDetails(invoice: InvoiceV1) {
    this.router.navigate([
        "invoices/details/" + invoice.InvoiceId
    ]);
}

. Они нужны для детализации счета. Где:

ngOnInit() {
    this.routeSub = this.route.params.subscribe(params => {
        this.invoiceId = params['id'];
    });
    this.getInvoice(this.invoiceId);
}

&

getInvoice(invoiceId) {
        this.invoiceSvc.getById(invoiceId).subscribe(
            (response: InvoiceV1) => {
                this.invoice = response;
                this.supplierId = response.supplierId;
                this.fillForms();
            },
            error => {
                console.log("Something went wrong, error: ", error);
            }
        );
    }

получить счет-фактуру и поместить его в this.invoice.

 <div class="invoice-detail-card-date">

    <div class="display" *ngIf="!editInvoice">
        <h6 class="display-title" translate="GENERAL.INVOICEDATE">date</h6>
        <p class="display-content">{{ invoice.invoiceDate }}</p>
    </div>

    <mat-form-field appearance="outline" *ngIf="editInvoice">
      <mat-label translate="GENERAL.INVOICEDATE">invoice date</mat-label>
      <input matInput formControlName="date" [placeholder]="invoiceDate" />
    </mat-form-field>

  </div>

Обычно то, что я получаю от сервера, прекрасно отображается в компоненте. Но теперь я не вижу данные, пока не нажму эту кнопку: (которая просто показывает меню параметров редактирования)

<mat-icon class="invoice-detail-card-actions-icon" aria-label="Send" svgIcon="icon_dots" matPrefix [matMenuTriggerFor]="menu"></mat-icon>

Что может помешать присутствующим данным (это console.logs при инициализации ) не отображается при запросе до тех пор, пока функция не станет