0
269
Views¿Cambiar menú desplegable basado en otro menú desplegable en Angular 11?
Quiero cambiar el menú desplegable en función de otro menú desplegable.
ts.archivo
Countries: Array<any> = [ { name: '1st of the month', states: [ {name: '16th of the month'} ] }, { name: '2nd of the month', states: [ {name: '17th of the month'} ] }, { name: '3rd of the month', states: [ {name: '18th of the month'} ] }, ] states: Array<any> = []; cities: Array<any> = []; changeCountry(country: any) { this.states = this.Countries.find(cntry => cntry.name == country.target.value).states; }archivo.html
<mat-form-field> <mat-select [(ngModel)]="custFirst" name="custFirst" placeholder="Country" (change)="changeCountry($event)"> <mat-option *ngFor="let country of Countries" [value]="country.name" > {{ country.name }}</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-select placeholder="State"> <mat-option *ngFor="let state of states" [value]="state.name">{{ state.name }} </mat-option> </mat-select> </mat-form-field>Ahora mi problema es que no puedo obtener el valor en el segundo menú desplegable. Por favor, ayúdenme por qué la parte del disparador no funciona.
·
Santiago Trujillo
2 answers
Answer question0
El evento de change debe cambiarse a selectionChange . Si desea que el estado se seleccione automáticamente, agregue [(ngModel)] al menú desplegable del estado y actualícelo cuando cambie el país:
changeCountry(country: any) { this.states = this.Countries.find( (cntry) => cntry.name == country.value ).states; this.sFirst = this.states[0].name; } <mat-form-field> <mat-select [(ngModel)]="custFirst" name="custFirst" placeholder="Country" (selectionChange)="changeCountry($event)"> <mat-option *ngFor="let country of Countries" [value]="country.name" > {{ country.name }}</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-select placeholder="State" [(ngModel)]="stateFirst"> <mat-option *ngFor="let state of states" [value]="state.name">{{ state.name }} </mat-option> </mat-select> </mat-form-field>Ejemplo de trabajo: https://stackblitz.com/edit/angular-6-stackoverflow-nzvqse?file=src/app/components/stackoverflow-solution/stackoverflow-solution.component.ts
·
Santiago Trujillo
Report
0
Puede manejar eso con declaraciones de cambio de caso, pasar el valor de país a la función getStates
country:string = 'Uruguay'; states:string[]; getStates(country: string){ switch(country) { case '': this.states = []; break; case 'República Dominicana': this.states = ['', 'Azua', 'Baoruco', 'Barahona', 'Valverde']; break; case 'Uruguay': this.states = ['', 'Artigas', 'Canelones', 'Tacuarembó']; break; case 'Venezuela': this.states = ['', 'Amazonas', 'Apure', 'Yaracuy']; break; } } this.getCountryData(this.country);entonces a la vista:
<mat-option *ngFor="let state of states" [value]="state.name">{{ state.name }}
·
Santiago Trujillo
Report
Answer question