Несколько событий Angular 5 не вызываются

Я пытаюсь создать образец приложения в angular5. Пример кода приведен ниже. Проблема заключается в том, что после нажатия на любую строку таблицы она запускает только событие размытия текстового поля, а событие щелчка строки таблицы не запускается. Мое требование состоит в том, чтобы сначала запустить событие щелчка строки таблицы, а затем событие размытия текстового поля. Какие-либо предложения?

test.component.html

  <div class="container">
  <h1>Angular events</h1>
  <hr />
  <div class="row">
    <div class="col-xl">
      <input #inputText type="text" (keyup)="filterList(inputText.value)" (blur)="hideList()" />
      <table class="table" *ngIf="showList">
        <thead>
          <tr>
            <th scope="col">name</th>
            <th scope="col">date</th>
            <th scope="col">time</th>
            <th scope="col">price</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let event of gridEventList" (click)="selectItem($event)">
            <td>{{event.name}}</td>
            <td>{{event.date}}</td>
            <td>{{event.time}}</td>
            <td>{{event.price}}</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
</div>

test.component.ts

filterList(input:string) {
        console.log("filter list")
    }

    selectItem(event){ 
      console.log("select event row values")
    }

    hideList(){
      console.log("text lost focus")
    }

typescript events angular angular5
person ketan27j    schedule 28.01.2018    source источник
comment
не используйте событие как переменную - это запрещенное слово - Итак, вы можете передать в качестве аргумента свою функцию. например ‹ tr *ngFor=let ev of gridEventList (click)=selectItem($event,ev) › ‹ td›{{ev.name}}‹ /td›   -  person Eliseo    schedule 29.01.2018
comment
Да обязательно так сделает.   -  person ketan27j    schedule 29.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Мое требование состоит в том, чтобы запустить событие щелчка строки таблицы сначала, а затем событие размытия текстового поля

Вам лучше вызывать hideList() из вашего selectItem(), чтобы вы всегда были уверены, что это запускается после выбора <tr>. Я бы предложил вообще отказаться от события размытия, а затем просто...

selectItem(evt){ 
    console.log("select event row values");
    this.hideList();
}

Однако... Если вам действительно нужно событие размытия, вам нужно поменять местами:

<tr *ngFor="let event of gridEventList" (click)="selectItem($event)">

to:

<tr *ngFor="let event of gridEventList" (mousedown)="selectItem($event)">

Это связано с тем, что порядок событий кликов следующий: mousedown > blur > click

События mousedown и blur происходят одно за другим, когда вы нажимаете кнопку мыши, но щелчок происходит только тогда, когда вы ее отпускаете. Справочник.

person Zze    schedule 28.01.2018
comment
Ваши предложения очень полезны. Отлично сработало для меня. Спасибо. - person ketan27j; 29.01.2018