Question

我有一个组件，它每3秒从http请求获取其值，并将这些值作为@input传递给子组件。每当输入有新值时，子组件的视图就会闪烁。所以我每隔3秒钟闪烁一次就会得到一个子组件（显示空值），然后立即显示正确的值。有什么办法可以阻止这种闪烁？

我对PushStrategy感到厌倦，但无法解决

组件

div class="patient-box" *ngIf = "model" >
<div class="patient-name">
  {{model?.firstName}} {{model?.lastName}}
  <div *ngIf="model.internalPatientId">{{model?.internalPatientId}}</div>
  <div *ngIf="!model.internalPatientId" style="color: white">-</div>
</div>
  <app-status [patient]="model" class="status"></app-status>

子组件，每3秒呈现第一个空值，然后呈现正确的值。

<div class="invitation-status-container">
  <div *ngIf="patient?.statusId === 1" class="invitation-status status-item pending">
    {{'InvitationStatus.Invited' | translate}}
  </div>
  <div *ngIf="patient?.statusId === 2" [ngClass]="{'inactive': patient?.filterStatus === 2}" class="invitation-status status-item accepted">
    <span *ngIf="patient?.filterStatus === 4">{{'InvitationStatus.Active' | translate}}</span>
    <span *ngIf="patient?.filterStatus === 2">{{'InvitationStatus.InActive' | translate}}</span>
  </div>
  <div class="invitation-status status-item rejected" *ngIf="patient?.statusId === 3">
    {{'InvitationStatus.Rejected' | translate}}
  </div>
</div>

Angular 6 @input更改其值并且视图太慢以至于无法检测

0 个答案: