Question

主要组成部分：

HTML

<event-thumbnail *ngFor='let event1 of events' #thumbnail  [event2]="event1" (eventClick)='handleEventClicked($event)'>Hello</event-thumbnail>
<button class='btn btn-primary' (click)="thumbnail.alertFoo()">alert id</button>
<button class='btn btn-primary' (click)='thumbnail.handleClickMe()'>click me!</button>

事件 - 缩略图

  alertFoo(){
    alert("id called");
  }

  handleClickMe(){
    this.eventClick.emit('foo');
    alert('click');
  }

在上面的代码中，我无法使用缩略图按钮 - ＆gt;使用* ngFor ie时的模板变量。没有通过缩略图调用alertFoo和handleClickMe（）。我也尝试将它包装在div中，但它仍然无法正常工作。它只适用于我将整个代码封装在带有* ng的div内，即也是显示不需要的多个按钮的按钮。我想了解ngFor的工作原理是否有一些解决方法，我希望重复事件，但按钮只能显示一次。

Answer 1

为此目的使用ViewChild。这是一个例子。由于不确切知道你的组件是如何命名的，我在这里使用虚拟名称。所以父母：

<强>模板：

<button (click)="alertFooInChild()">Click</button>

<强> TS：

@ViewChild(AppChild) appChild: AppChild;

alertFooInChild() {
  // call the method in the child
  this.appChild.alertFoo();
}

这是demo plunker：）

* ngFor如何使用角度2中的模板变量？

1 个答案: