DOM не обновляется, если не нажать на

Question

У меня есть служба, которая получает данные с сервера простым запросом get, подписывается на него из компонента и назначает ответ переменной в компоненте, которая отображается в таблицу в HTML.когда страница загружается, таблица пуста, и когда я щелкаю в любом месте DOM, представление обновляется, и таблица загружает данные

в component.ts

   ngAfterViewInit(): void {
     this.myService.searchAttendanceRecords(5, 1, 'id', 1).subscribe(res => 
       {
         console.log(res); // this works
         this.data = res;
       }
   }

в HTML

  <table class="table">
      <thead>
        <tr>
          <th >Employee</th>
          <th >Date Time</th>
          <th >Latitude</th>
          <th >Longitude</th>
          <th>Driving</th>

        </tr>
      </thead>
      <tbody>


        <ng-container *ngFor="let item of data">
          <tr >
            <td data-title="Employee">{{item.Employee}}</td>
            <td data-title="Date Time">{{item.DateTime}}</td>
            <td data-title="Latitude">{{item.Latitude}}</td>
            <td data-title="Longitude">{{item.Longitude}}</td>
            <td data-title="Driving">{{item.IsDriving}}</td>
          </tr>
        </ng-container>


      </tbody>
    </table>

ожидается: таблица загружается при загрузке страницы или обновляется

актуально: таблица не будет загружаться, пока я не нажму на DOM

Answer 1

Я думаю, вам также нужно подписаться под ngOnInit.

ngOnInit(){
 this.myService.searchAttendanceRecords(5, 1, 'id', 1).subscribe(res => 
   {
     console.log(res); // this works
     this.data = res;
   }
}

Answer 2

Это обычно вызывается стратегией changeDetection.OnPush.

https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4?gi=de1aeda3d62c

Пожалуйста, покажите свой декоратор @Component полностью.

Может также быть в родительском декораторе @Component.