Angular 将自动推进的焦点放在动态添加的选择元素上

我有一个模板，可以为数据集中的每一列动态添加列标题，其中包含一个select元素（下拉列表）。数据集中的列数也是动态的。 我看到的问题（我只在Chrome和Edge中测试过）是，当您在第一列中选择一个值时，focus会自动切换到下一列的select，将next select设置为与我在上一列中刚刚选择的值相同的值。更改第二个的值，焦点切换到第三个，第二个和第三个都具有相同的值。当我更改第三个时，只有第三个被更改，因此它们不是共享同一个模型

如果使用鼠标或键盘，则会发生这种情况。使用键盘时，它更烦人，因为当您键入字母时，会选择第一个匹配值，并且焦点会移动到下一个选择框，即使您希望在下拉列表中获得第二个条目

如何使动态生成的列标题不自动移动到下一个下拉列表

还有一点更令人不安，当焦点自动切换到下一个下拉列表时，类应该是

ng触摸ng脏ng有效

但他们转向了

ng未触及ng原始ng有效

所以我不认为验证会起作用

我要展示一下我的能力

代码如下：

import {Component, NgModule, VERSION} from '@angular/core'
import { FormsModule } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
    <table>
      <thead>
        <tr>
          <ng-container *ngFor="let curColumn of selectedColumnTypes;let colIndex = index">
            <td>
              <select name="ColumnType{{colIndex}}" class="form-control" [(ngModel)]="selectedColumnTypes[colIndex]" required>
                <option *ngFor="let ct of colTypes" [value]="ct.Value">{{ct.Name}}</option>
              </select>
            </td>
          </ng-container>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let dataRow of sampleImport">
          <tr>
            <td *ngFor="let dataColumn of dataRow">{{dataColumn}}</td>
          </tr>
        </ng-container>
      </tbody>
    </table>
    </div>
    <div style="background-color:lightgrey">
      Select boxes not tied to model<br/>
      <select name="test1" class="form-control" required>
        <option *ngFor="let ct of colTypes" [value]="ct.Value">{{ct.Name}}</option>
      </select>
      <select name="test2" class="form-control" required>
        <option *ngFor="let ct of colTypes" [value]="ct.Value">{{ct.Name}}</option>
      </select>
      <select name="test3" class="form-control" required>
        <option *ngFor="let ct of colTypes" [value]="ct.Value">{{ct.Name}}</option>
      </select>
    </div>

  `,
})
export class App {
  selectedColumnTypes: Array<ColumnType> = new Array<ColumnType>();
  colTypes: Array<NameValuePair> = new Array<NameValuePair>();
  sampleImport:Array<any[]> = new Array<any[]>();
  constructor() {
    //three of these because we have three columns (this number is dynamic in actual code)
    this.selectedColumnTypes.push(null);
    this.selectedColumnTypes.push(null);
    this.selectedColumnTypes.push(null);

    this.colTypes.push(new NameValuePair("Faculty", ColumnType.Faculty));
    this.colTypes.push(new NameValuePair("First Name", ColumnType.FirstName));
    this.colTypes.push(new NameValuePair("Last Name", ColumnType.LastName));
    this.colTypes.push(new NameValuePair("Email", ColumnType.Email));
    this.colTypes.push(new NameValuePair("Phone", ColumnType.Phone));

    this.sampleImport.push(["a@b.com","James" , "Smith"   ]);
    this.sampleImport.push(["e@f.com","Rick"  , "Jones"   ]);
    this.sampleImport.push(["g@f.com","Oscar" , "Taylor"  ]);
    this.sampleImport.push(["h@f.com","Taylor", "Williams"]);
    this.sampleImport.push(["d@f.com","John"  , "Doe"     ]);
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

export enum ColumnType {
    FistName =1,
    LastName = 2,
    Email = 3,
    Phone = 4,
    Faculty = 5
}

export class NameValuePair {
  constructor(
    public Name: string,
    public Value: any
  ) { }
}

从'@angular/core'导入{Component，NgModule，VERSION}
从'@angular/forms'导入{FormsModule}；
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{ct.Name}
{{dataColumn}}
选择未绑定到模型的框

{{ct.Name}
{{ct.Name}
{{ct.Name}
`,
})
导出类应用程序{
selectedColumnTypes:Array=new Array（）；
colTypes:Array=newarray（）；
sampleImport:Array=newarray（）；
构造函数（）{
//其中三个是因为我们有三列（这个数字在实际代码中是动态的）
this.selectedColumnTypes.push（空）；
this.selectedColumnTypes.push（空）；
this.selectedColumnTypes.push（空）；
this.colTypes.push（新名称valuepair（“Faculty”，ColumnType.Faculty））；
this.colTypes.push（新的NameValuePair（“First Name”，ColumnType.FirstName））；
this.colTypes.push（新的NameValuePair（“Last Name”，ColumnType.LastName））；
this.colTypes.push（新名称值对（“Email”，ColumnType.Email））；
this.colTypes.push（新名称值对（“Phone”，ColumnType.Phone））；
this.sampleImport.push（[“a@b.com“，”詹姆斯“，”史密斯“）；
this.sampleImport.push（[“e@f.com“，”瑞克“，”琼斯“）；
this.sampleImport.push（[“g@f.com“，”奥斯卡“，”泰勒“）；
this.sampleImport.push（[“h@f.com“，”泰勒“，”威廉姆斯“）；
this.sampleImport.push（[“d@f.com“，”约翰“，”多伊“）；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}
导出枚举列类型{
FistName=1，
LastName=2，
电子邮件=3，
电话=4，
教员=5
}
导出类NameValuePair{
建造师(
公共名称：string，
公共价值：任何
) { }
}

不确定原因，但[（ngModel）]=“selectedColumnTypes[colIndex]”上的ngModel会给您带来问题。我可以通过给每个selectedColumnTypes一个唯一的对象来修复它

[(ngModel)]="selectedColumnTypes[colIndex].index"


this.selectedColumnTypes.push({ index: null});
this.selectedColumnTypes.push({ index: null});
this.selectedColumnTypes.push({ index: null});

以下是更新的工作plunker：

---

Thx！根据您的回答，ngModel似乎有一些怪癖，通过数组引用到原语。