Блог

У меня есть выпадающий список выбора, значение параметра которого берется из массива объектов.Когда я нажму кнопку добавить, будет добавлен новый выпадающий список, а при нажатии кнопки удалить конкретный выпадающий список будет удален.При загрузке страницы выберите опцию (необходимо изменить выпадающий список), затем нажмите кнопку Добавить, и вы получите другой выпадающий список ниже.Теперь здесь требуется, чтобы выбранные параметры не повторялись снова в добавленном выпадающем списке после добавления нового выпадающего списка. До сих пор работает нормально.Проблема в том, что все выпадающие списки обновляются.Вот код ниже https://stackblitz.com/edit/angular-sxfanw?file=src/app/app.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);
    }
}
  

я работал над вашим кодом, и вот как я заставляю его работать

сначала вам нужно изменить 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