Работая с 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);
}
}
Всего 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)
}
}