in ParentComponent =>

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object]'.
            at viewDebugError (vendor.bundle.js:8962)
            at expressionChangedAfterItHasBeenCheckedError (vendor.bundle.js:8940)

父组件Html

<div>
  <app-child-widget [allItems]="allItems" (notify)="eventCalled($event)"></app-child-widget>
<div>

父组件

export class ParentComponent implements OnInit {

  returnedItems: Array<any> = [];
  allItems: Array<any> = [];

  constructor(
  ) { }

  ngOnInit() {
     this.allItems = // load from server...
  }

  eventCalled(items: Array<any>): void {
    this.returnedItems = items;
  }
}

子组件

@Component({
  selector: 'app-child-widget',
  templateUrl: 'child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() notify: EventEmitter<any> = new EventEmitter();
  @Input() private allItems: Array<any>;

  constructor() { }

  ngOnInit() {
    doSomething();
  }

  doSomething() {
    this.notify.emit(allItems);
  }
}

推荐答案

文章Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error详细解释了这种行为

原因

您的问题与to this one非常相似,但不是通过服务更新父属性,而是通过同步事件广播进行更新.以下是linked answer中的一段话:

在消化循环期间,Angular对子对象执行某些操作

  • 更新输入
  • 打电话给恩戈尼特

所以在您的例子中,Angular更新了子组件上的输入绑定allItems,然后调用了子组件上的onInit,这导致了父组件的allItems的更新.现在数据不一致了.父组件有一个值,而子组件有另一个值.如果Angular继续同步更改,将得到一个无限循环.这就是为什么在下一个变更检测周期中,Angular检测到allItems个变更并抛出一个错误.

解决方案

当您从父组件和子组件更新details时,这似乎是一个应用程序设计缺陷.如果不是,则可以通过异步发送事件来解决问题,如下所示:

export class ChildComponent implements OnInit {
  @Output() notify: EventEmitter<any> = new EventEmitter(true);
                                                        ^^^^^^-------------

但你必须非常小心.如果您使用任何其他钩子,比如在每个摘要循环中调用的ngAfterViewChecked,则为you'll end up in cyclic dependency!

Typescript相关问答推荐

net::BER_RECTION_REUSED和Uncatch使用Axios和TanStack-Query useMutation时未捕获错误(DelivercMutation)

参数类型undefined不能分配给参数类型字符串|未定义

如何防止TypeScript允许重新分配NTFS?

TypeScript Page Routing在单击时不呈现子页面(React Router v6)

具有继承的基于类的react 组件:呈现不能分配给基类型中的相同属性

不推荐使用Marker类-Google map API警告

为什么我的一个合成函数不能推断类型?

是否可以基于对象的S属性值[]约束对象的其他属性值用于类型化的对象数组?

TypeScrip中的类型安全包装类

有没有可能创建一种类型,强制在TypeScrip中返回`tyPeof`语句?

如何连接属性名称和值?

在Reaction中折叠手风琴

棱角分明-什么是...接口类型<;T>;扩展函数{new(...args:any[]):t;}...卑鄙?

KeyOf关键字在特定示例中是如何工作的

在TS泛型和记录类型映射方面有问题

有没有一种方法可以防止我的组件包在其中安装样式组件'; node 模块中的s目录

如何知道使用TypeScript时是否在临时工作流内运行

显式推断对象为只读

Typescript泛型-键入对象时保持推理

如何为对象创建类型,其中键是只读且动态的,但值是固定类型?