焦點在動態添加的select元素上自動前進

Question

我有一個模板，它爲數據集中的每一列動態添加一個帶有select元素（下拉列）的列標題。數據集中的列數也是動態的。 我看到的問題（我只在Chrome和Edge中進行了測試），是當您在第一列中選​​擇一個值時，焦點自動切換到下一列的選擇，將下一個選擇設置爲我剛剛選擇的相同值在之前。改變秒的值，並將焦點切換到第三個，第二個和第三個具有相同的值。當我改變第三個時，只有第三個改變，所以他們並不都是共享相同的模型。

如果您使用鼠標或鍵盤，會發生這種情況。使用鍵盤更麻煩，因爲當您鍵入一個字母時，即使您想要在下拉菜單中獲得第二個條目，也會選擇第一個匹配值，然後焦點移動到下一個選擇框。

如何讓我的動態生成的列標題不會自動移動到下一個下拉列表中？

此外，一些微小的更令人不安的是，當焦點自動切換到下一個下拉列表中，類應該

NG-感動NG-髒NG-有效

，但他們切換到

NG-不變NG-原始NG-有效

所以我不會驗證是否會起作用。

我有一個plunker證明plunker demo

這裏是代碼：

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 
) { } 
} 

Answer 1

不知道爲什麼，但ngModel的[（ngModel）] = 「selectedColumnTypes [colIndex]」 是造成你的問題。我能夠通過給每個selectedColumnTypes一個唯一的對象來修復它。

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


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

下面是更新工作plunker：

https://plnkr.co/edit/cNge2aA1aQsAr9YI338j?p=preview