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

Question

我在行列上有一个 select dropdowd，我正在尝试添加一个带有新选择框的新行，其中删除了先前选择的值。我使用 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);
}

}

datas 和 headlist 由我的服务注入

如您所见，第一个选择的颜色“BLANC NEIG”已根据需要从选择中删除，但也从第一行中删除

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();

然后当您在评论中说明时，选择更改发出了颜色的事件。像这样的：

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;
}