Tengo un menú desplegable que tengo que mostrar este menú desplegable del archivo constant.ts y en el segundo menú desplegable tengo que mostrar el menú desplegable en función de la selección de los primeros valores desplegables.
.constante.ts
export const ActionRecordConstant = { contact: 'Contact1', about: 'About', };.componente.ts
public getCodes() { let baseUrl = `/api end point`; this._restfulService .restfulGetData(baseUrl) .subscribe( (actionLookupData: ActionLookupData) => { if (actionLookupData) { this.contactCodes = actionLookupData.contactCodes; this.aboutCodes = actionLookupData.aboutCodes; } }, (err) => { console.error(err); }, ); } public contactSelect(data: any) { this.contactId = data; } public aboutSelect(data: any) { this.aboutId = data; }.componente.html
<div class="row mt-15"> <div class="form-group"> <div class="col-sm-3"> <label> <b>Contact</b></label> </div> <div class="col-sm-7"> <select class="form-control"> <option value="" disabled [selected]="true"></option> <option>About</option> <option>Contact</option> </select> </div> </div> </div> <div class="row mt-15"> <div class="form-group"> <div class="col-sm-3"> <label> <b>Action</b></label> </div> <div class="col-sm-7"> <select> <option value="" disabled [selected]="true"></option> <option>//code</option> </select> </div> </div> </div>Entonces, mi requisito es que cuando seleccionamos cualquier lista de la categoría de la primera lista, debemos mostrar las listas desplegables relacionadas en los segundos menús desplegables.
Puede usar un asunto para realizar la acción y cambiar de caso para asignar los valores específicos para el menú desplegable.
<select *ngIf="billingActions$ | async as actions" #action (change)="onSelectAction(action.value)" > <option value="0" selected>pick action</option> <option *ngFor="let action of actions" [value]="action.name"> {{ action.name }} </option> </select> <select *ngIf="actionCodes$ | async as codes"> <option *ngFor="let code of codes">{{ code.name }}</option> </select>En la acción de selección, elija el valor y asigne los códigos específicos.
private selectedAction = new Subject(); private selectedAction$ = this.selectedAction.asObservable(); billingActions = [ { name: 'billing', }, { name: 'member', }, { name: 'other', }, ]; memberContactCodes = [ { name: 'member Action Code A', }, { name: 'member Action Code B', }, ]; billingActionCodes = [ { name: 'billing Action A', }, { name: 'billing Action B', }, ]; otherActionCode = [ { name: 'Other Action A', }, { name: 'OtherAction B', }, ]; categories = [ { id: 1, name: 'billing' }, { id: 2, name: 'others' }, ]; billingActions$ = of(this.billingActions); actionCodes$ = this.selectedAction$.pipe( map((action: string) => { switch (action) { case 'billing': console.log('billin'); return this.billingActionCodes; case 'member': return this.memberContactCodes; case 'other': return this.otherActionCode; default: return this.billingActionCodes; } }) ); onSelectAction(value) { this.selectedAction.next(value); }Puede ver un ejemplo aquí: https://stackblitz.com/edit/angular-ivy-5ea4fw