Question

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

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

如何让我的动态生成列标题不会自动移动到下一个下拉列表？

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

ng-touching ng-dirty ng-valid

但他们切换到

ng-untouched ng-pristine ng-valid

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

我有一个能够展示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）] =“selectedColumnTypes [colIndex]”上的ngModel会导致问题。我能够通过给每个selectedColumnTypes一个唯一的对象来修复它。

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


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

这是更新的工作人员：

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

重点关注动态添加的选择元素

1 个答案: