Удалить объект из массива при выборе выпадающего

Question

Работая с Angular 8, у меня проблема в логи c.

Есть два выпадающих списка:

Первый выпадающий

• Параметры в первом раскрывающемся меню отображаются из массива объектов

  Пример кода, ts:

       {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819",
        rs_code: "100006",
        rs_name: "Leanbox Logistics Solutions Pvt Ltd"} , 

     {rs_id: "a5f100d5-bc88-4456-b507-116157523345",
     rs_code: "123406",
     rs_name: "xysa Solutions Pvt Ltd"} , 

     {rs_id: "a5f100456-b507-116157523345",
     rs_code: "123406223",
     rs_name: "Solutions Pvt Ltd"} , 
  ]

html

<option>
    <select  (change)="getRsId($event)"  > 
    <option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> {{data.rs_name}} </option>



</select>

• Опции во втором раскрывающемся меню отображаются из того же массива объектов, но из объекта выбранный в первом раскрывающемся списке следует удалить из массива.

Пример полного кода:

ссылка slackbliz ->

https://stackblitz.com/edit/angular-7lgyfe?file=src%2Fapp%2Fapp.component.html

html

<div> 

<p> First DropDown </p>

<select  (change)="getRsId($event)"  > 
<option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> {{data.rs_name}} </option>
</select>


<p> Second DropDown </p>

<select  (change)="getRsId($event)" > 
<option [value]='data.rs_id' *ngFor='let data of r_rsList  ; let i = index'> {{data.rs_name}} </option>
</select>



</div>

ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  s_rsList  :any = [
    {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819",
     rs_code: "100006",
     rs_name: "Leanbox Logistics Solutions Pvt Ltd"} , 


     {rs_id: "a5f100d5-bc88-4456-b507-116157523345",
     rs_code: "123406",
     rs_name: "xysa Solutions Pvt Ltd"} , 

     {rs_id: "a5f100456-b507-116157523345",
     rs_code: "123406223",
     rs_name: "Solutions Pvt Ltd"} , 
  ]

  r_rsList : any = [] 


  constructor(){}


  getRsId(value){



    console.log(value);


    let Rsindex =   value.target['selectedIndex'];
    console.log(Rsindex);
    this.r_rsList.splice(Rsindex, 1);


  }
}

Answer 1

Вы можете иметь значения ngModel для элементов выбора и использовать свойство get для фильтрации 2-го массива

  selected_R_Item;
  selected_S_Item;

  get r_rsList() {
    return this.s_rsList.filter(item => item.rs_id !== this.selected_S_Item )
  }  

Htm;

<select [(ngModel)]="selected_S_Item"     > 
<option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> {{data.rs_name}} </option>
</select> 

<select  [(ngModel)]="selected_R_Item"   > 
<option [value]='data.rs_id' *ngFor='let data of r_rsList  ; let i = index'> {{data.rs_name}} </option>
</select>

Демо

Answer 2

Есть несколько способов достижения ожидаемого поведения, один из них:

Мы можем установить геттер для r_rsList, который будет клонировать s_rsList кроме выбранного элемента.

рабочий пример : https://stackblitz.com/edit/angular-fjttxn?file=src%2Fapp%2Fapp.component.ts

Answer 3

Удалить (change)="getRsId($event)" из второго выпадающего списка, изменить getRsId на:

 getRsId(value) {
   this.r_rsList = this.s_rsList.slice();
   this.r_rsList.splice(value.target["selectedIndex"], 1);
 }

Answer 4

Я сделал некоторые изменения в вашем файле TS. Это работает в соответствии с моим пониманием вашего требования.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  s_rsList  :any = [
    {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819",
     rs_code: "100006",
     rs_name: "Leanbox Logistics Solutions Pvt Ltd"} , 


     {rs_id: "a5f100d5-bc88-4456-b507-116157523345",
     rs_code: "123406",
     rs_name: "xysa Solutions Pvt Ltd"} , 
  ]

  r_rsList : any = [] 


  constructor(){}


  getRsId(value){



    console.log(value);
    let Rsindex =   value.target['selectedIndex'];
    console.log(Rsindex);
    this.r_rsList=this.s_rsList.slice();
    this.r_rsList.splice(Rsindex,1)
  }
}

Answer 5

Просто используйте 2 разных массива:

В вашем TS:

s_rsList = [.....] //your principal array
s_rsList_2;

constructor() {
  this.s_rsList_2 = this.s_rsList;
}

 getRsId(value){
    let Rsindex =   value.target['selectedIndex'];
    console.log(Rsindex);
    this.s_rsList_2 = this.s_rsList.filter((value, index) => index != Rsindex  )
  }

В вашем HTML

<select  (change)="getRsId($event)"  > 
  <option [value]='data.rs_id' *ngFor='let data of s_rsList  ; let i = index'> 
  {{data.rs_name}} </option>
</select>




<select  (change)="getRsId($event)" > 
  <option [value]='data.rs_id' *ngFor='let data of s_rsList_2; let i = index'> 
  {{data.rs_name}} </option>
</select>