从服务器接收新数据后，为什么不呈现模板？

Question

我已请求服务器：

this.userService.loadPupils(GlobalModel.getSelectedPeriod().schoolId, this.filter.schoolStudyPeriod, this.pagination.from, this.pagination.to, filters)
      .subscribe(data => {

      this.fltUsers = []; 
       this.fltUsers = data;
       console.log(this.fltUsers);

});

在console.log中，我得到了数组this.fltUsers中的两个元素（对象）。

然后我的模板是：

 <tr *ngFor="let s of fltUsers; let i = index; let isOdd=odd; let isEven=even">
  </tr>

但是我在页面上看不到这些行。

我的完整模板：

<div id="school-students" *ngIf="fltUsers.length > 0">
     <tbody>
    <tr *ngFor="let s of fltUsers; let i = index; let isOdd=odd; let isEven=even" [class.odd]="isOdd"
        [class.even]="isEven"
        [ngClass]="{'no-print': !s.checked, 'print': s.checked, 'outcome': s.outcomeMovementDate }">
      <td>
        <div class="image-checkbox">
          <img
            src="{{s.photo}}"
            class="avatar">
          <div class="checkbox" [ngClass]="{'block': s.checked }">
            <md-checkbox [checked]="s.checked" (change)="s.checked = !s.checked"></md-checkbox>
          </div>
        </div>
      </td>
      <td class="fio"><span>{{s.lastName}}</span> <span>{{s.firstName}}</span> <span>{{s.middleName}}</span>
      </td>
      <td>{{s.birthDate}}</td>
      <td class="hidden-sm-up">{{formatGender(s.gender)}}</td>
      <td>{{s.cls}}</td>
      <td>{{s.studyLanguage}}</td>
      <td class="movement"><span>{{s.transfer_in}}</span><span>{{s.transfer_out}}</span></td>
      <td>{{s.mobilePhone}}</td>
      <td>{{s.email}}</td>
      <!-- <td>{{formatDate(s.lastLogin)}}</td>-->
      <td class="settings border-right-corner">
        <div class="div-buttons-group">
          <div class="button-icons" (click)="openEditDlg(i)">
            <span class="edit">
            <i
              class="material-icons"><span *ngIf="!s.outcomeMovementDate">mode_edit</span> <span
              mdTooltip="{{'view_card' | translate}}" mdTooltipPosition="above"
              *ngIf="s.outcomeMovementDate">visibility</span></i></span>
          </div>
        </div>
      </td>
    </tr>
    </tbody>
</div>

Answer 1

您要声明一个空数组，然后分配结果。您需要手动触发变更检测。

解决方案1 ​​

this.fltUsers = []; 
this.userService.loadPupils(GlobalModel.getSelectedPeriod().schoolId, this.filter.schoolStudyPeriod, this.pagination.from, this.pagination.to, filters)
      .subscribe(data => {
       this.fltUsers = data;
       console.log(this.fltUsers);

});

解决方案2

constructor(private cdr: ChangeDetectorRef){}

this.userService.loadPupils(GlobalModel.getSelectedPeriod().schoolId, this.filter.schoolStudyPeriod, this.pagination.from, this.pagination.to, filters)
      .subscribe(data => {
       this.fltUsers = []; 
       this.fltUsers = data;
       console.log(this.fltUsers);
       this.cdr.detectChanges();

});