当 table 中的输入失去焦点时如何触发 "focusout" 事件？

Question

我有一个 table，其中 input 放置：

<tr *ngFor="let persons of ReceivedData">
  <td *ngFor="let person of persons">

    <div *ngIf="person.personId === editRowId && person.editable === true ">
        <input type="number" [(ngModel)]="person.CarCount" 
               (focusout)="focusOutFunction()"/>
    </div>                            
    <div *ngIf="person.editable === false " (click)="toggle(person)">
        {{ person.CarCount ? person.CarCount : '-' }}
    </div>

  </td>
<tr>

但是 focusout 事件没有被触发。这是处理 focusout 函数的方法：

focusOutFunction() {        
}

有趣的是，当 input 没有放在 table:

中时，focusout 工作得很好

<input type="number" (focusout)="focusOutFunction()" />

当我聚焦在 table 内部时如何触发事件？

Answer 1

使用 blur 事件将焦点移出。

<input type="number" [(ngModel)]="person.CarCount" 
               (blur)="focusOutFunction()"/>

Answer 2

Here's a working plnkr of focusout 在 table 内处理，设置与您类似。另一个关键是包含一个 autofocus 属性：

 <input type="number" [(ngModel)]="person.CarCount" 
           (focusout)="focusOutFunction()" autofocus/>

当 table 中的输入失去焦点时如何触发 "focusout" 事件？

How to fire "focusout" event when focus lost of input placed in table?

html

input

lost-focus

angular2-template

angular