angular 4 click na li :: 4programmers.net

2017-09-26T10:08:25+02:00

Rejestracja: dni
Ostatnio: dni

Mam problem z wywołaniem (click) na tagu z poziomu Angular 4.

Kopiuj

       <li *ngFor="let item of items | SearchFilterPipe : searchText" (click)="onItemClick()">
            {{item}}
        </li>

Kopiuj

export class SearchFilterComponent {
    @Input() items: string[];
    searchText: string = null;
    displayItems = false;

    constructor() { }

    onSearchInputFocus() {
        this.displayItems = !this.displayItems;
        this.searchText = null;
    }
    
    onItemClick() {
        console.log('asdads');
    }
}

W ogóle nie wykonuje się metoda "onItemClick" ktoś ma pomysł czemu?

2017-09-26T10:22:59+02:00

Rejestracja: dni
Ostatnio: dni

Problem jest przez ```
*ngFor="let item of items | SearchFilterPipe : searchText"

Kopiuj

bez Pipe'a działa poprawnie. Dostajesz coś w konsoli ?

2017-09-26T10:32:55+02:00

Rejestracja: dni
Ostatnio: dni

Problem jest w tym, że wykonuje się metoda (blur) na input i wtedy nie wykonuje się (click) na li.

Kopiuj

(blur)="onSearchInputFocus()"

Cały kod:

Kopiuj

<input [(ngModel)]="searchText" (focus)="onSearchInputFocus()"  (blur)="onSearchInputFocus()" type="text" class="form-control" />
<div *ngIf="displayItems && searchText !== null">
    <ul>
        <li *ngFor="let item of items | SearchFilterPipe : searchText" (click)="onItemClick(item)">
            {{item}}
        </li>
    </ul>
</div>

Kopiuj

 onSearchInputFocus() {
        this.displayItems = !this.displayItems;
        this.searchText = null;
    }
    
    onItemClick(item: string) {
        console.log(item);
        this.selectedItem = item;
        
        this.displayItems = !this.displayItems;
        this.searchText = null;
    }