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

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

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

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

Параметры в первом раскрывающемся списке отображаются из массива объектов.
Пример кода, т.с .:

       {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>

Т.С.

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);


  }
}

javascript arrays angular angular8

Всего 4 ответа

Вы можете иметь значения ngModel для элементов select и использовать свойство 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>

демонстрация

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

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

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

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

В вашем ТС:

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>

Я сделал некоторые изменения в вашем файле 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)
  }
}