Question

我正在使用angular 5 + ngrx / store。我有自己的tokenfield组件。这应该与bootstrap-tokenfield完全一样。它看起来像这样stackblitz。在stackblitz它按预期工作，但在我的应用程序中由于某些原因，我添加每个令牌后失去焦点。似乎pressEnter事件触发器失去焦点。 pressEnter触发容器中的操作：

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

然后我传递给组件抛出容器标记：

[tokens]="tokens$ | async"

以下是reducer中处理此操作的函数：

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

我发现问题的根源是什么。我在public StudentDTO saveStudent(StudentDTO studentDTO) throws StudentServiceException { Student student = beanMapperUtil.createEntityFromDto(studentDTO, Student.class); System.out.println(student); if (pqssValidationUtil.validate(student)) { logger.logEvent(MessageConstant.METHOD_ADD_STUDENT, "Saving Student"); student = studentDomain.saveStudent(student); studentDTO = beanMapperUtil.createDtoFromEntity(student, StudentDTO.class); } else { throw new StudentServiceException(pqssValidationUtil.getErrorMessages()); } return studentDTO; }组件*ngFor以上tokenfield。

<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;
}

在发出Angular 5事件时丢失输入焦点？

1 个答案: