输入更改时Angular2动态输入字段失go 焦点

发布于02月19日

我在做一个动态的表格.Field有一个值列表.每个值都由一个字符串表示.

export class Field{
    name: string;
    values: string[] = [];
    fieldType: string;
    constructor(fieldType: string) {this.fieldType = fieldType;}
}

我的组件中有一个函数，可以向字段添加新值.

addValue(field){
    field.values.push("");
}

值和按钮在我的HTML中显示如下.

<div id="dropdown-values" *ngFor="let value of field.values; let j=index">
    <input type="text" class="form-control" [(ngModel)]="field.values[j]" [name]="'value' + j + '.' + i"/><br/>
</div>
<div class="text-center">
    <a href="javascript:void(0);" (click)="addValue(field)"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>

一旦我在输入值中写入一些文本，输入就会失go 焦点.

推荐答案

当数组是基元类型时会发生这种情况，在您的例子中是Stringarray.这可以通过使用TrackBy解决.因此，请更改模板以匹配以下内容:

<div *ngFor="let value of field.values; let i=index; trackBy:trackByFn">
    <input type="text" [(ngModel)]="field.values[i]"  /><br/>
</div>
<div>
    <button (click)="addValue(field)">Click</button>
</div>

在ts文件中添加函数trackByFn，该函数返回值的(唯一)index:

trackByFn(index: any, item: any) {
   return index;
}

这是一个关于同一个问题的link，除了这个问题是针对AngularJS的，但是这个问题与你的问题相对应.该页最重要的摘录:

您在一个数组上重复，并且更改了数组的项(请注意，您的项是字符串，在JS中是原语，因此可以"按值"进行比较).由于检测到新项目，旧元素将从DOM中删除，并创建新元素(这显然无法获得焦点).

如果Angular 为TrackBy，则可以根据唯一标识符来跟踪添加(或删除)哪些项目，并且只创建或销毁已更改的项目，这意味着您不会分散对输入字段的关注:)

如链接中所示，您还可以修改数组以包含唯一的对象，例如使用[(ngModel)]="value.id"，但这可能不是您所需要的.

Angular相关问答推荐

Angular -在使用react 式表单和数组时try 使最后一个表单控制不需要-带有添加和删除按钮

接收错误NullInjectorError：R3InjectorError(_AppModule)[config—config]....>过度安装Angular—Markdown—Editor

如何用Effect()识别正确的Angular 信号？

Angular 类型的表单不能分配给分部类型

如何使用ANGLING HTTP.POST并将类型更改为键入的回复？

倒计时计时器，每10秒重新启动一次，共4次

bootstrap 可折叠菜单在单击时未展开.Angular 应用程序

当快速拖动光标时会丢失元素 - Angular

Angular *ngIf 表达式中这么多冒号的作用是什么？

使用 primeng Apollo 主题进行实时部署时多次加载 theme.css 和 preloading.css 文件

错误：服务或构建Angular 项目时模块构建失败

具有两个订阅方法的 Angular 16 takeUntilDestroyed 运算符

Angular6：RxJS switchMap 运算符未按预期工作

在父组件的子组件中使用 ng-template

如何使用 Angular 12 material 验证密码和确认密码？

Angular 2模板驱动表单访问组件中的ngForm

使用 Jasmine 和 Karma 对 Angular 进行单元测试，错误：无法绑定到xxx，因为它不是xxxxxx的已知属性.

angular2：错误： TypeError： Cannot read property '...' of undefined

Angular2 Routerlink：添加查询参数

Firebase 查询子项的子项是否包含值

实用课程推荐