Question

我有以下Angular组件（简化问题）：

<md-sidenav-container fxFlex>
  <div fxFlex class="app-content">
    This is the content
  </div>
  <button *ngIf="newsbar.opened" type="button" (click)="closeBar(newsbar)">Close</button>
  <button *ngIf="!newsbar.opened" type="button" (click)="openBar(newsbar)">Open</button>
  <md-sidenav #newsbar mode="side" [opened]="showNewsBar()" align="end" class="app-news-bar">
    <app-news-bar></app-news-bar>
  </md-sidenav>
</md-sidenav-container>

以下是决定新闻栏是否开放的功能（基于窗口宽度）。

showNewsBar() {
  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (width >= 1280) {
    return true;
  } else {
  return false;
  }
}

运行应用程序时，一切都按预期工作。当窗口较小或小于1280px时，侧边栏关闭，并且打开＆＃34;打开＆＃34;按钮显示。当窗口较大或大于1280像素时，侧边栏会打开并且“关闭”＃34;按钮显示。但是，每当调整窗口大小以触发函数showNewsBar()的更改时，我都会收到错误。

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

当我调整窗口大小以使其变大并且新闻栏打开时，Previous value: 'false'. Current value: 'true'.

给我错误的行是按钮。出于某种原因，Angular并不喜欢我将* ngIf指令绑定到本地MdSidenav引用＆＃34;打开＆＃34;属性。

同样，一切都按预期工作。功能没有错。那么为什么会出现这种错误呢？有没有办法解决它？

为什么我在Angular

0 个答案: