угловое свойство не определено даже после связывания в Oninit

Question

я объявил свойство в моем файле ts, как показано ниже, и инициировал его в моем ngOnInit (), как показано, когда я делаю консольный журнал этого свойства или пытаюсь прочитать его из шаблона, который говорит undefined введите описание изображения здесь

.ts файл:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
   selector: 'app-main-home',
   templateUrl: './main-home.component.html',
   styleUrls: ['./main-home.component.css']
   })
export class MainHomeComponent implements OnInit {

   serviceList:product[] = [];
   tcsDbComponents:TcsDbComponent[];


constructor(private dataService:DataService, private 
   route:ActivatedRoute) { }

ngOnInit() {    
  console.log("this.serviceList")

    this.dataService.getServiceList().subscribe((data) => {
    this.serviceList = data; 

   });
}

}

interface product{
  id:number;
  component:String; 
}

шаблон:

<p>
main-home works!
</p>
<div class="test" ng-if={{flag}}>{{serviceList}}</div>
<div class="service-cards" *ngFor="let service of serviceList "
[routerLink]="['/', componentDetail.component]">
{{serviceList}}

<div class="card">
  <h1>{{service?.id}}</h1>

<h1>{{service?.component}}</h1>
<h1>{{service?.id}}</h1>

</div>
</div>

код скриншотов

Answer 1

Вам необходимо поместить console.log внутри subscribe, а также инициализировать serviceList в пустой массив

serviceList : produce[] = [];

если вы используете указанную выше переменную в шаблоне внутри ngFor, обязательно используйте оператор безопасной навигации, так как вы ожидаете ответа от асинхронного запроса.

<h1> {{service?.component}}</h1>

ngIf следует использовать с логическим значением, не используйте аннотации

<div class="test" *ngIf=flag>{{serviceList | json }}</div>