Question

目前，我正在尝试通过创建令人惊叹的购物清单应用程序来了解更多关于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？

Answer 1

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

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

并在您的TypeScript文件中：

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

我希望它会有所帮助。

Answer 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>

Angular 2 - 更改数组时的Click事件

2 个答案: