Question

我选择了下拉菜单，其选项值来自对象数组。当我单击添加按钮时，将添加新的下拉菜单，然后单击删除按钮将删除特定的下拉菜单。在页面加载时选择一个选项（需要onchange下拉菜单）），然后点击添加按钮，您将在下面看到其他下拉菜单。现在，这里的要求是，添加新的下拉菜单后，所选的选项不应再重复到添加的下拉菜单中。到现在为止一切正常，问题是所有下拉列表都在更新中，这是下面的代码 https://stackblitz.com/edit/angular-sxfanw?file=src%2Fapp%2Fapp.component.html

app.component.html

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Code</th>
           
        </tr>
    </thead>
    <tbody>
        
        <tr>
            <td>
               <select (change)="onChange($event.target.value)">
                <option *ngFor="let title of arraydata" [value]="title.name" >{{title.name}}</option>
                </select>
            </td>
            
            <td>
                <button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
            </td>
        </tr>
        <tr *ngFor="let field of fieldArray; let i = index">
            <td>
                <select (change)="onChange($event.target.value)">
                
                <option *ngFor="let title of arraydata" [value]="title.name" >{{title.name}}</option>
                </select>
            </td>
          
            <td>
                <button class="btn btn-default"  type="button" (click)="deleteFieldValue(i)">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

app.component.ts

import { Component ,OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
fieldArray: Array<any> = [];
 newAttribute: any = {};
arraydata = [{"name":"name1","value":1},{"name":"name2","value":2},{"name":"name3","value":3},{"name":"name4","value":4}]
selectedDevice:any;
    
    
    ngOnInit() {
        console.log(this.arraydata)
     
  }
  onChange(deviceValue) {
    this.selectedDevice = deviceValue;
}

    addFieldValue() {
        const index = this.arraydata.findIndex(x => x.name ===this.selectedDevice);
        console.log(index);
        this.arraydata.splice(index, 1);
        console.log(this.arraydata);
        this.fieldArray.push(this.newAttribute)
        this.newAttribute = {};
    }

    deleteFieldValue(index) {
        this.fieldArray.splice(index, 1);
    }
}

Answer 1

我已经在处理您的代码，这就是我如何使其工作

首先，您必须将arraydata更改为数组数组

 i = 0;
 arraydata = [
  [
   { name: "name1", value: 1 },
   { name: "name2", value: 2 },
   { name: "name3", value: 3 },
   { name: "name4", value: 4 }
 ]
];

这是添加下拉方法

addFieldValue() {
   const arr = [...this.arraydata];
   this.arraydata.push(
    arr[this.i].filter(x => x.name !== this.selectedDevice)
   );
   this.fieldArray.push(this.newAttribute);
   this.newAttribute = {};
   this.i += 1;
}

您的html变为

<tr>
 <td>
    <select (change)="onChange($event.target.value)">
    <option *ngFor="let title of arraydata[0]" [value]="title.name" >{{title.name}}</option>
    </select>
 </td>

 <td>
  <button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
 </td>
</tr>
<tr *ngFor="let field of fieldArray; let i = index">
  <td>
    <select (change)="onChange($event.target.value)">
     <option *ngFor="let title of arraydata[i+1]" [value]="title.name" >{{title.name}}</option>
    </select>
  </td>

  <td>
    <button class="btn btn-default"  type="button" (click)="deleteFieldValue(i)">Delete</button>
  </td>
</tr>

这是工作代码https://stackblitz.com/edit/angular-ujyrdr?file=src/app/app.component.html

如何在角度8中单击按钮时从多个下拉列表中删除所选选项

app.component.html

app.component.ts

1 个答案: