Question

我在行colomn上有一个选择下拉列表，我尝试使用新选择框添加新行，并删除先前选择的值。我使用ngModelChange调用一个函数，该函数将选定的值赋给我的ngModel并将其从选择列表中删除。问题是每当我添加一个新行时，从所有行中删除该值。

注意：我无法为我的项目创建一个plunker

我的网格看起来像这样：

<tbody>
        <tr *ngFor="let row of rows">
            <td></td>
            <td>
                <select [ngModel]="row.color" (ngModelChange)="onSelectColor(row, $event)"> // value is a string or number
                    <option *ngFor="let obj of availableColors">{{obj}}</option>
                </select>
            </td>
            <td *ngFor="let headItem of headList"><input class="input" type='text' #qty/></td>
        </tr>
    </tbody>
    <button (click)='addRow()'>Add a row</button>

我的组件我有这个：

export class ReferenceTableComponent implements OnInit {

observable: Observable<any>;

//couleurs exp:  ['first', 'seconde']
@Input() public datas: Array<string>;

public availableColors: Array<string>;

//exp: ['1' ,'2', '3']
@Input() public headList:  Array<string>;


public rows: Array<any> = [{}];

public rowIDs: Array<any> = [];

constructor(private injector: Injector) {
}

ngOnInit() {
    this.computeAvailableColors();
}

addRow() {

    this.rows.push({});
}

computeAvailableColors() {
    this.availableColors = _.concat([''], this.datas);
    console.log(_.map(this.rows, 'color'))
    this.rowIDs  = _.map(this.rows, 'color')
    this.availableColors = _.difference(this.availableColors, this.rowIDs);
}

onSelectColor(row, color) {
    row.color = color;
    this.availableColors = this.availableColors.filter(c => c !== color);
}

}

数据和头列表由我的服务注入

正如您所看到的第一个选择颜色＆＃39; BLANC NEIG＆＃39;根据需要从选择中删除，但也从第一行中删除

Answer 1

我真的不明白你想要达到的目标。但是，如果要从可用颜色中删除选择颜色，您只需要这样：

 public onSelectColor(row, color) {
    row.color = color;
    this.availableColors = this.availableColors.filter(c => c !== color);
  }

这将改变所有重新渲染它们的选择元素而不删除颜色。

如果您不想从所有现有选择中删除颜色，则对于每个选择，您应该具有不同的可用颜色数组。我会把这行作为一个角度组件。

 constructor(private _cr: ComponentFactoryResolver, private _viewContainerRef: ViewContainerRef) { };
 public onSelectColor(row, color) {
        //workout the new colors
        const newAvailableColors = this.availableColors.filter(c => c !== color);
        // Create new row component on the fly   
        const row: ComponentRef<RowComponent> = 
          this._viewContainerRef.createComponent(
           this._cr.resolveComponentFactory(RowComponent)
          );
        //Add whatever you want to the component
        row.instance.addColors(newAvailableColors);
        row.instance.addSelectedColor(color);
      }

子组件应在选择更改时发出事件。所以孩子应该有这样的事情：

@Output()
public changed = new EventEmitter();

然后当select更改时，使用您在评论中说的颜色发出事件。像这样：

this.changed.emit({ color: color, row: row });

然后父母，当将子组件放在html中时将能够捕获事件。这样的事情：

(changed)="onSelectColor($event)"

显然，onSelectColor必须改变它的参数。现在它应该接受这个事件。（为事件创建一个界面，而不是使用任何界面）

public onSelectColor(event: any) {
   //Do the same but retrieving info from the event 
event.color;
event.row;
}

使用ngModelChange添加新的并删除以前选择的值

1 个答案: