角度属性选择器：输出绑定不起作用答案

【问题标题】：Angular Attribute Selector: Output Binding Not Working角度属性选择器：输出绑定不起作用
【发布时间】：2017-05-03 13:38:15
【问题描述】：

我有 2 个组件：一个列表和一行。

在列表组件的模板中，我使用了一个表格，并且为了使行与 ngFor 一起工作，我必须为子组件使用一个属性选择器（即使用方括号）：

@Component({
  selector: '[my-tr]'
.
.
})

子组件还有一个输出，它被声明、初始化，然后在按下按钮时触发：

@Output() onItemDeleted: EventEmitter<SubscriberListItem>; 
..
this.onItemDeleted = new EventEmitter<SubscriberListItem>();
..
this.onItemDeleted.emit(this.item);

然后在父组件上，模板包含子作为表格行如下：

<table>
<tbody>
<tr my-tr *ngFor="let item of items" [item]="item" (onItemDeleted)="removeItem($event)"></tr>
</tbody>
</table>

这是该行的模板：

<td width="25%">{{item.name}}</td>
<td width="40%">{{item.street}}</td>
<td width="5%">{{item.postCode}}</td>
<td width="30%">
    <button (click)="removeItem($event)">DELETE</button>        
</td>

问题来了：当在一行上按下删除按钮时，会调用行组件上的处理程序：

removeItem(event: any): void { 
   this.onItemDeleted.emit(this.item); 
}

这很好。但是，当尝试触发发射器时，它永远不会到达父级。查看浏览器控制台，我看到以下错误：

ERROR TypeError: co.removeItem is not a function
    at Object.eval [as handleEvent] (SubscribersListComponent.html:191)
    at handleEvent (core.es5.js:11799)
    at callWithDebugContext (core.es5.js:13007)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:12595)
    at dispatchEvent (core.es5.js:8773)
    at core.es5.js:10638
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3840)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:236)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitter.Subject.next (Subject.js:55)
    at EventEmitter.emit (core.es5.js:3814)
    at SubscriberRowComponent.webpackJsonp.537.SubscriberRowComponent.removeItem (subscriber-row.component.ts:35)
    at Object.eval [as handleEvent] (SubscriberRowComponent.html:7)

这与我在子组件的表格行上使用属性选择器有关。行上输出绑定的上下文不是父组件，因此它没有找到“removeItem”函数。

谁能帮我解决这个问题或提出修复建议？

非常感谢。

【问题讨论】：

标签： angular

【解决方案1】：

不确定我的理解是否正确，但这是一个有效的简化示例：

  @Component({
  selector: '[my-tr]',
  template: '{{item}} <button (click)="removeItem($event)">DELETE</button>'
})
export class MyTr {
  @Input() item: any;
  @Output() onItemDeleted = new EventEmitter<any>; 

  removeItem(event: any): void { 
   this.onItemDeleted.emit(this.item); 
  }
}
@Component({
  selector: 'my-app',
  template: `
    <div>
      <div my-tr *ngFor="let item of items" [item]="item" (onItemDeleted)="removeItem($event)"></div>
    </div>
  `,
})
export class App {
  items = ['a', 'b', 'c'];

  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  removeItem(item) {
    console.log('removeItem', item);
  }
}

【讨论】：