Question

我有一个包含多个答案的页面，用户可以单击其中的一个来选择正确的答案。做出选择后，将触发动画，向用户显示他们是否正确选择。完成用户操作后，他们单击“下一步”按钮继续进行下一个问题。

问题是用户在图标动画结束之前单击下一步时。当我让动画播放到最后时，我没有收到错误消息。

这是用于离子应用的：

Ionic:

   ionic (Ionic CLI)  : 4.3.1 (/Users/rpatulski/.nvm/versions/node/v10.13.0/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : no whitelisted plugins (13 plugins total)

System:

   NodeJS : v10.13.0 (/Users/rpatulski/.nvm/versions/node/v10.13.0/bin/node)
   npm    : 6.4.1
   OS     : macOS High Sierra

具有以下角度版本：

@angular/core@4.1.3
@angular/animations@4.1.3

答案在ExamDetailsPage.html模板的for循环中得出：

<ng-container *ngFor="let curAnswer of question.possibleAnswers">
    <ion-item [ngClass]="getRowAnswerClass(curAnswer)" id={{curAnswer.rowId}} *ngIf="curAnswer.rowId && curAnswer.rowId !==''" (click)="clickedRow(curAnswer)">
        <h5 item-title>{{curAnswer.Text}}</h5>
        <ion-icon [@iconAnimationTrigger]="iconAnimationState" (@iconAnimationTrigger.done)="answerChosenFinished($event)" invalid-icon icon-medium item-right name="close-circle">
        </ion-icon>
        <ion-icon [@iconAnimationTrigger]="iconAnimationState" (@iconAnimationTrigger.done)="answerChosenFinished($event)" correct-icon icon-medium item-right name="checkmark-circle">
        </ion-icon>
    </ion-item>
</ng-container>

请注意，question.possibleAnswers是来自组件的数据。

当用户单击下一步按钮时，将运行以下功能：

showQuestion(){
    ...
    this.indexQ++;
    // the following changes the data needed in the template
    this.question = this.questionArray[this.indexQ - 1];
    ...
}

在没有通过单击“下一步”按钮来中断动画的情况下，我没有收到任何错误消息，否则，我会感觉到更改检测出现了问题。这是堆栈跟踪：

ERROR TypeError: Cannot read property '_view' of null
    at ViewContainerRef_.move (core.es5.js:10136)
    at common.es5.js:1722
    at DefaultIterableDiffer.forEachOperation (core.es5.js:7021)
    at NgForOf._applyChanges (common.es5.js:1711)
    at NgForOf.ngDoCheck (common.es5.js:1701)
    at checkAndUpdateDirectiveInline (core.es5.js:10818)
    at checkAndUpdateNodeInline (core.es5.js:12238)
    at checkAndUpdateNode (core.es5.js:12177)
    at debugCheckAndUpdateNode (core.es5.js:12880)
    at debugCheckDirectivesFn (core.es5.js:12821)

Answer 1

我通过不手动调用我的原始帖子中缺少的detectChanges来解决了这个问题：

answerChosenFinished(event: AnimationEvent) {
    this.iconAnimationState = IDLE_ANIM_STATE;
    this.changeDetector.detectChanges(); // removed this
}

中断角度动画时出现“无法读取属性'_view'为null的错误”错误

1 个答案: