发出事件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;
}