Question

我正在使用Angular 4。

用户列表组件显示用户详细信息组件的列表。每当更改细节时，都必须通知列表。这通过细节上的输出来工作。但是当调用列表侦听器时，this未定义，因此我无法访问任何列表状态。

<!-- list template -->
<ul>
  <li *ngFor="let user of users">
    <user-detail [user]="user" (onChanged)="onChanged()"></user-detail>
  </li>
</ul>

// list listener
public onChanged(): void {
  this.whatever = 'something else'; // boom! this undefined
}

如何设置列表组件才能使其正常工作？

我记得在AngularJS 1中，ngFor为项目创建了新的范围，因此我需要使用$parent。但是这对Angular 4有什么作用呢？

Answer 1

您的用户详细信息子组件

上应该有一个输入属性

UserDetailComponent

@Input() user: User;

ngOnChanges() {
  console.log(this.user);
}

您无需明确方法

<ul>
  <li *ngFor="let user of users">
    <user-detail [user]="user"></user-detail>
  </li>
</ul>

说明：当任何组件的输入属性发生更改时，ngOnChanges()生命周期挂钩会自动触发。

Answer 2

我试图在Plunkr上重现问题，但我无法这样做，一切都按预期工作。然后我注意到工作最小示例和错误代码之间的区别。这是承诺的链接，我失去了背景：

this.asyncThing().then(this.onChanged);

在明确调用函数时正确设置了this上下文：

this.asyncThing().then(() => this.onChanged());

我的坏。

在ngFor中调用parent的函数时，这是未定义的

2 个答案: