Angular 表达式在选中后已更改。以前的值：'；空值：0'；。当前值：'；空值：4'；

我收到以下错误：

“表达式在检查后已更改。以前的值：“null:0”。当前值：“null:4”。

当我移动行'this.ondeails.emit（this.items.length）；'对于构造函数，它没有向我提供初始值，因此我必须将其移动到ngOnInit（）

这为我提供了所需的初始值，应用程序运行良好，但当我这样做时，我收到了错误

通知小部件.component.ts

export class NotificationsWidgetComponent implements OnInit, AfterViewInit {
  @Input() config: NotificationsConfigComponent;
  @Output() ondetails = new EventEmitter();

  public items = [
    {
      title: 'Import of .......... failed',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    },
    {
      title: 'Manager ..........approved the budget',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    }
  ];

  constructor() {
  }

  deleteWidget(i) {
    this.items.splice(i, 1);
    this.ondetails.emit(this.items.length);
  }
  itemRead(i) {
    if (this.items[i].read == false) {
      this.items[i].read = true;
    }
  }
  ngOnInit() {
    this.ondetails.emit(this.items.length);
  }

  ngAfterViewInit() {
  }
}

export class WidgetCreatorComponent implements OnInit {
    @Output() onsave = new EventEmitter<any>(null);
    widgetType = WidgetType.KPI;
    widgetTypes = WidgetTypes;

    constructor(private layoutService: LayoutService) { }

    save() {
        let item: GridsterItem = {
            widgetType: this.widgetType,
            widgetConfig: this.setWidgetConfig(this.widgetType),

            widgetDetails: null,

        };
        this.layoutService.addItem(item);
        this.onsave.emit(this.widgetType);
    }
}

constructor(private cd: ChangeDetectorRef) { }

 ngAfterViewChecked() {
    this.cd.detectChanges();
  }

layout.component.html

<gridster [options]="options">
    <gridster-item *ngFor="let item of layout"
          <notifications-widget *ngSwitchCase="'Notifications'"

              (ondetails)="item.widgetDetails = $event">

          </notifications-widget>                   
    </gridster-item>
</gridster>

使用解决方案更新：

布局.组件.ts

export class NotificationsWidgetComponent implements OnInit, AfterViewInit {
  @Input() config: NotificationsConfigComponent;
  @Output() ondetails = new EventEmitter();

  public items = [
    {
      title: 'Import of .......... failed',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    },
    {
      title: 'Manager ..........approved the budget',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    }
  ];

  constructor() {
  }

  deleteWidget(i) {
    this.items.splice(i, 1);
    this.ondetails.emit(this.items.length);
  }
  itemRead(i) {
    if (this.items[i].read == false) {
      this.items[i].read = true;
    }
  }
  ngOnInit() {
    this.ondetails.emit(this.items.length);
  }

  ngAfterViewInit() {
  }
}


export class WidgetCreatorComponent implements OnInit {
    @Output() onsave = new EventEmitter<any>(null);
    widgetType = WidgetType.KPI;
    widgetTypes = WidgetTypes;

    constructor(private layoutService: LayoutService) { }

    save() {
        let item: GridsterItem = {
            widgetType: this.widgetType,
            widgetConfig: this.setWidgetConfig(this.widgetType),

            widgetDetails: null,

        };
        this.layoutService.addItem(item);
        this.onsave.emit(this.widgetType);
    }
}


constructor(private cd: ChangeDetectorRef) { }

 ngAfterViewChecked() {
    this.cd.detectChanges();
  }

使用解决方案更新：

布局.组件.ts

export class NotificationsWidgetComponent implements OnInit, AfterViewInit {
  @Input() config: NotificationsConfigComponent;
  @Output() ondetails = new EventEmitter();

  public items = [
    {
      title: 'Import of .......... failed',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    },
    {
      title: 'Manager ..........approved the budget',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    }
  ];

  constructor() {
  }

  deleteWidget(i) {
    this.items.splice(i, 1);
    this.ondetails.emit(this.items.length);
  }
  itemRead(i) {
    if (this.items[i].read == false) {
      this.items[i].read = true;
    }
  }
  ngOnInit() {
    this.ondetails.emit(this.items.length);
  }

  ngAfterViewInit() {
  }
}


export class WidgetCreatorComponent implements OnInit {
    @Output() onsave = new EventEmitter<any>(null);
    widgetType = WidgetType.KPI;
    widgetTypes = WidgetTypes;

    constructor(private layoutService: LayoutService) { }

    save() {
        let item: GridsterItem = {
            widgetType: this.widgetType,
            widgetConfig: this.setWidgetConfig(this.widgetType),

            widgetDetails: null,

        };
        this.layoutService.addItem(item);
        this.onsave.emit(this.widgetType);
    }
}


constructor(private cd: ChangeDetectorRef) { }

 ngAfterViewChecked() {
    this.cd.detectChanges();
  }

在组件中导入ChangeDetectorRef。检查这里：谢谢@HelloWorld的帮助。我已经在上面添加了代码。请参阅组件中的layout.component.ts文件导入ChangeDetectorRef。检查这里：谢谢@HelloWorld的帮助。我已经在上面添加了代码。请参阅layout.component.ts文件您应该将此答案标记为已接受，而不是更改问题标题以表示问题已解决。您应该将此答案标记为已接受，而不是更改问题标题以表示问题已解决。