javascript - ExpressionChanged错误，但没有生命周期挂钩(ExpressionChanged error but no lifecycle hooks)

Question

I'm trying to access a couple of material drawers so I can open/close them in another component, however I am getting the following error:(我正在尝试访问几个物料抽屉，以便可以在另一个组件中打开/关闭它们，但是出现以下错误：)

NavigationComponent.html:30 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'sideNavsDrawers: undefined'. Current value: 'sideNavsDrawers: [object Object],[object Object]'. I have read that this is normally a product of putting inappropriate functionality into lifecycle hooks, however I have just started this app and have zero lifecycle hooks.(我已经读到，这通常是将不合适的功能放入生命周期挂钩中的一种产品，但是我刚刚启动了此应用程序，并且生命周期挂钩为零。) I have a navigation component that I'm attempting to pass a QueryList of MatSideNav s to.(我有一个导航组件，试图将QueryList的MatSideNav传递给它。) @Component({ selector: 'app-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.scss'] }) export class NavigationComponent { @ViewChildren(MatSidenav) sideNavsDrawers: QueryList<MatSidenav> | undefined; } Within its template I have(在其模板中，我有) <app-toolbar [sideNavsDrawers]="sideNavsDrawers"></app-toolbar> And within that component(在该组件内) @Component({ selector: 'app-toolbar', templateUrl: './toolbar.component.html', styleUrls: ['./toolbar.component.scss'] }) export class ToolbarComponent implements OnInit { @Input() sideNavsDrawers: QueryList<MatSidenav> | undefined; } Adding the union for undefined was something I added when I saw the previous value was undefined in the error, but I don't know if it is necessary.(当我看到错误中先前的值undefined时，我添加了为undefined添加联合的内容，但是我不知道是否有必要。) Why are these very simple components generating this error, and how can I eliminate it?(为什么这些非常简单的组件会产生此错误，如何消除该错误？) Reproduced on StackBlitz(转载于StackBlitz)   ask by 1252748 translate from so

Answer 1

The exception is triggered when a value used for data binding changes as the view is being updated, which is the case for the QueryList populated with ViewChildren in NavigationComponent .(当用于作为视图正在被更新，这是为的情况下的数据绑定的变化的值的异常被触发QueryList与填充ViewChildren在NavigationComponent 。)

You can avoid the exception this way:(您可以通过以下方式避免异常：) Redefine the sideNavsDrawers input property as an array:(将sideNavsDrawers输入属性重新定义为数组：) export class ToolbarComponent implements OnInit { @Input() sideNavsDrawers: Array<MatSidenav>; } Construct the array with the template reference variables instead of using ViewChildren :(使用模板引用变量而不是使用ViewChildren构造数组：) <mat-sidenav #leftDrawer ... > ... <mat-sidenav #rightDrawer ... > ... <app-toolbar [sideNavsDrawers]="[leftDrawer, rightDrawer]"> See this stackblitz for a demo.(有关演示，请参见此堆叠闪电战 。)