发出更新事件时的项目值为null

Question

onCardClicked(item: BudgetItem) {
const dialogRef = this.dialog.open(EditItemModalComponent, {
  width: '580px',
  data: item
})

console.log(item)

dialogRef.afterClosed().subscribe(result => {
  // check if result has a value
  if (result) {
    console.log(item)

    this.update.emit(
      {
        old: item,
        new: result
      }
    );
  }

})}

当我尝试读取subscribe（）内部项目的值时，它似乎是空的。据我所知，箭头功能应该能够使用本地范围中的值。因此，应该读取项目值。

因此，Angular无法计算总预算，并且在主页组件中显示不正确的总数。

如果有人有任何想法，请提供帮助！

请在Stackblitz中找到完整的代码

Answer 1

您将在订阅回调中收到的结果参数中有数据。箭头功能没有本地范围。如果您仍然想使用项目而不是结果，则必须将其转换为非箭头功能并像以下内容一样绑定： -

 onCardClicked(item: BudgetItem) {
    const dialogRef = this.dialog.open(EditItemModalComponent, {
      width: '580px',
      data: item,
    });

    console.log(item);
    var closeCallback = function (result) {
      // check if result has a value
      console.log('result');
      console.log(result);
      if (result) {
        console.log(item);

        this.update.emit({
          old: item,
          new: result,
        });
      }
    }.bind(this);
    dialogRef.afterClosed().subscribe(closeCallback);
  }

工作stackblitz： - https://stackblitz.com/edit/edit/github-tvrqgd?file=src/app/budget-/budget-gudget-gudget-gudget-gudget-gudget-gudget-app-- item-list/budgem-item-list.component.ts