typescript NG0100：Angular中动态类的ExpressionChangedAfterItHasBeenCheckedError

jrcvhitl 于 2023-06-24 发布在 TypeScript

关注(0)|答案(1)|浏览(143)

我有一个在我的HTML代码，应该有不同的类，它从一个变量。Broughter图片：我有一个面板作为一个mat-card，我想扩大时，悬停在它。HTML代码包含作为自身组件的按钮。如果面板展开，这些按钮应该会得到信息。按钮通过输入[isExpanded]="isPanelExpanded()"获得此信息，我也有一个“引脚按钮”，引脚面板，所以它总是扩展
HTML代码是

<mat-card class="{{fastLaneClass}}" [ngStyle]="{'height': height}">
  <button mat-icon-button (click)="pin()" class="expand-button" [ngClass]="{'expand-button-active': isPinned, 'expand-button-visible': isExpanded}">
    <mat-icon style="font-size: 20px;">push_pin</mat-icon>
  </button>
  <mat-card-content class="fast-lane-content">
    <div *ngFor="let button of fastlaneItems">
      <app-fastlane-button [item]="button" 
      (clicked)="onFastlaneItemButtonClicked($event, button)" 
      [isFastlaneClickEnabled]="isFastlaneClickEnabled" [isEnabled]="isButtonEnabled(button)" [isExpanded]="isPanelExpanded()">
      </app-fastlane-button>
      <div class="button-space"></div>
      <div *ngIf="button.isForwardButton">
        <hr>
        <div class="button-space"></div>
      </div>
    </div>
  </mat-card-content>
</mat-card>

返回按钮输入的函数还设置了定义卡类的变量fastLaneClass。
这是相关的Typescript代码：

isPanelExpanded() : boolean {
    const flp = document.querySelector('.fast-lane-panel')
    const isHover = flp?.matches(':hover');
    const isExpanded: boolean = (isHover || this.isPinned) ?? false;
    this.isExpanded = isExpanded;
    this.fastLaneClass = isExpanded ? 'infobar fast-lane-panel fast-lane-panel-expanded' : 'infobar fast-lane-panel';
    return this.isExpanded;
  }

因为我在检查鼠标是否悬停在对象上时遇到了问题，所以我只是查找HTML元素是否有:hover。
当我将鼠标悬停在对象上时，即使一切正常，它也会收到以下错误消息：Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'infobar fast-lane-panel'. Current value: 'infobar fast-lane-panel fast-lane-panel-expanded'.
我已经尝试过[ngClass]="{'fast-lane-panel-expanded': isExpanded}"了，我已经尝试过一个函数，它只返回两个或全部三个css类。我试了所有我能想到的方法，希望能解决这个问题。
有人知道我错在哪里吗？

typescript

来源：https://stackoverflow.com/questions/76424037/ng0100-expressionchangedafterithasbeencheckederror-for-dynamic-class-in-angular

1条答案

按热度按时间

bq3bfh9z1#

感谢@Fabian Strathaus，我找到了问题所在。就像他说的，这是因为被调用的函数isPanelExpanded()改变了类变量fastLaneClass，这使得Angular重新加载了class="{{fastLaneClass}}"属性。因此，即使Angular认为它知道fastLaneClass是什么，它在渲染时会改变。
我将class属性更改为函数getFastLaneClass()：

<mat-card class="{{getFastLaneClass()}}" [ngStyle]="{'height': height}">

而不是变量isExpanded，我现在只使用函数isPanelExpanded：

<button mat-icon-button (click)="pin()" class="expand-button" [ngClass]="{'expand-button-active': isPinned, 'expand-button-visible': isPanelExpanded()}">
    <mat-icon style="font-size: 20px;">push_pin</mat-icon>
  </button>

函数isPanelExpanded()和getFastLaneClass()现在看起来像这样：

isPanelExpanded() : boolean {
    const flp = document.querySelector('.fast-lane-panel')
    const isHover = flp?.matches(':hover');
    const isExpanded: boolean = (isHover || this.isPinned) ?? false;
    return isExpanded;
  }

  getFastLaneClass() : string {
    return this.isPanelExpanded() ? 'infobar fast-lane-panel fast-lane-panel-expanded' : 'infobar fast-lane-panel';
  }

赞(0）回复(0）举报 2023-06-24

我来回答

typescript NG0100：Angular中动态类的ExpressionChangedAfterItHasBeenCheckedError

1条答案

相关问题

热门标签

最新问答