删除动态行中选定的下拉值答案

【问题标题】：delete selected dropdown value in dynamic row删除动态行中选定的下拉值
【发布时间】：2019-04-02 16:29:36
【问题描述】：

我有带有子下拉值的父下拉列表以及添加按钮和删除按钮。如果我在下拉列表中选择了任何值，那么它不应在单击添加按钮时呈现在另一行下拉列表中，当我单击删除按钮时，它应该删除特定行并在前一个下拉列表中添加已删除的下拉列表值。

使用 Angular 6 从下拉/垫选择中添加和删除值

component.html

标准 {{select.columnName}} {{where.key}}

组件.ts

constructor(private fb : FormBuilder,private service:ExpoCmsService,private 
http:HttpClient) {
  this.service.getSearchCmsData().subscribe(data=>{
   this.selects=data;
  })
  this.profileForm = this.fb.group({
    query:new FormControl('',Validators.required),
    optionGroups : this.fb.array([
        this.fb.group({
          selectInput : new FormControl('',Validators.required),
          whereInput : new FormControl('',Validators.required),

       }),
    ]),
  });

  onSelectSelect(selectInput: string , formIndex : number) : void {
      this.wheres[selectInput] = this.selects.filter((item)=> 
    item.columnName == selectInput);
    }

 public addOptionGroup(){
const fa = this.profileForm.controls["optionGroups"] as FormArray;
fa.push(this.newOptionGroup());

}

【问题讨论】：

你的代码在哪里？

标签： angular

【解决方案1】：

您必须在选择值以及添加或删除行时管理数据源。您可以通过在.html 文件中的选择元素上添加(onSelectionChange)="change($event)" 来获取更改事件，例如<mat-option (onSelectionChange)="change($event)" ...... ></mat-option> 然后在您的.ts 文件中，您可以在以下函数中进行修改。

change(event)
  {
    if(event.isUserInput) {
     ....delete the data from data source....
    }
  }

此外，当您删除行时，您必须从 mat select 中捕获项目并将其放回数据源中。

 delete(event)
          {
            ......add the data back to data source.....

             ....delete the row....
          }

【讨论】：