Question

我有带有孩子下拉列表值的父下拉列表以及添加按钮和删除按钮。如果我在下拉菜单中选择了任何值，则在单击添加按钮时不应在另一行下拉菜单中显示该值，当我单击删除按钮时，应在上一个下拉列表中添加已删除的下拉菜单值来删除特定行。

使用角度6从下拉列表/ mat选择中添加和删除值

component.html

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

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

}

Answer 1

在选择值时以及添加或删除行时，您必须管理数据源。您可以通过在(onSelectionChange)="change($event)"文件中的select元素（例如.html）上添加<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....
          }

删除动态行中的选定下拉列表值

1 个答案: