时间戳

首页 > 解决方案 > 在选择下拉列表时从数组中删除对象

javascript - 在选择下拉列表时从数组中删除对象

问题描述

使用 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>
  • 第二个下拉列表中的选项从相同的对象数组中显示，但在第一个下拉列表中选择的对象应从 Array 中删除。

完整代码示例：

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


  }
}

标签： javascriptarraysangularangular8

解决方案

您可以在选择元素上有一个 ngModel 值并使用get属性来过滤第二个数组

  selected_R_Item;
  selected_S_Item;

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

嗯;

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

演示

推荐阅读