Angular 2 - 更改数组时的单击事件答案

【问题标题】：Angular 2 - Click event on changing arrayAngular 2 - 更改数组时的单击事件
【发布时间】：2017-05-25 10:40:42
【问题描述】：

目前，我正在尝试通过创建令人惊叹的一种购物清单应用程序来了解有关 Angular 2 的更多信息。但是在我的搜索结果中创建click 事件时遇到了困难。

view.html

<form class="search">

    <input type="text" name="query" class="form-control" [(ngModel)]="query" (ngModelChange)="change()" (blur)="onBlur()" />

    <ul class="results" [class.hidden]="!showResults">

        <li *ngFor="let result of results">
            <a (click)="selectResult(result)">
                {{ result.title }}
            </a>
        </li>

    </ul>

</form>

view.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'search',
  templateUrl: 'app/search/view.html',
  styleUrls: ['app/search/view.css']
})

export class Search
{

    ... Some interesting things here

    // selectResult
    // ------------------------------ -->

    selectResult (selected: any)
    {

        console.log(123);

    }

    // ------------------------------ -->

    ... More interesting things here

}

当有人开始输入时，结果会动态变化。当有人点击结果时，没有任何反应，没有console.log(123)。

有人知道如何将click 附加到发生变化的ngFor 上吗？

【问题讨论】：

标签： arrays angular dynamic click ngfor

【解决方案1】：

您忘记了一件小事，即删除默认的 href 操作。在您的 HTML 文件中：

<a href="#" (click)="selectResult($event, result)">
   {{ result.title }}
</a>

在你的 TypeScript 文件中：

selectResult (event: any, selected: any) {
   event.preventDefault();
   console.log(123);
}

我希望它会有所帮助。

【讨论】：

不工作:(我读过这个问题是因为结果改变并且它不能绑定，但我不相信（这是Angular而不是jQuery :P）。

【解决方案2】：

我找到了解决这个问题的方法。

隐藏元素时，不知何故 click 事件未绑定。 (wtf...?)

这是最终的解决方案：

view.html

<form class="search">

    <input type="text" name="query" class="form-control" [(ngModel)]="query" (ngModelChange)="change()" (blur)="onBlur()" />

    {{ results.length }}

    <ul class="results" *ngIf="results.length != 0">

        <li *ngFor="let result of results">
            <a href="#" (click)="selectResult(result)">
                {{ result.title }}
            </a>
        </li>

    </ul>

</form>

【讨论】：