發出事件Angular 5時失去輸入焦點？

Question

我正在使用angular 5 + ngrx / store。 我有自己的tokenfield組件。 這應該像bootstrap-tokenfield一樣工作。 看起來像是這種堆疊閃電戰 。 在stackblitz中，它可以按預期工作，但是由於某些原因，在我的應用程序中，添加每個令牌后我都失去了注意力。 似乎pressEnter事件觸發器失去了焦點。 pressEnter觸發容器中的操作：

addToken(token: Token) { this.store.dispatch(new Actions.addToken(token)); }

然后我傳遞給組件拋出容器令牌：

[tokens]="tokens$ | async"

這是化簡器中處理此操作的函數：

export function addTokenCase(payload: Token, state: State) {
  return state.map((tokenModel) => {
    if (tokenModel.from === payload.from) {
      return {
        ...tokenModel,
        items: uniqueArray<string>([...tokenModel.items, ...payload.tokens]),
      };
    }
    return tokenModel;
  });
}

其中uniqueArray是：

export function uniqueArray<T>(array: T[]): T[] {
  return array.filter((elem, pos, arr) => arr.indexOf(elem) === pos);
}

可能是什么問題？ 謝謝。

Answer 1

我發現了問題的根源。 我在*ngFor tokenfield組件上面有*ngFor ：

<div *ngFor="let token of tokens">
  <ui-token [token]="token"></ui-token>
</div>

因此，當我使用.map()更改狀態時-所有<ui-token />組件都被重新渲染。 我添加了trackBy ，它現在可以按預期工作，而無需重新渲染：

<div *ngFor="let token of tokens; trackBy: trackToken">
  <ui-token [token]="token"></ui-token>
</div>

其中trackToken是：

trackToken(index: number) {
  return index;
}