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

这通常是由changeDetection.OnPush策略引起的。

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

请完整显示您的@Component装饰器。

它也可能在父@Component装饰器中。

Answer 2

我认为您也需要在ngOnInit下进行订阅。

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

除非点击DOM，否则它不会更新

2 个答案: