Angular 级联垫-select 下拉菜单
Angular cascading mat-select dropdowns
我正在尝试制作一个 mat-select 级联下拉列表。
问题是,当我单击“国家/地区”下拉菜单和 select 一个选项时,它不会显示为 selected,所以我什至无法测试整个级联下拉菜单。
依赖下拉列表-component.html:
<div class="content">
<mat-form-field appearance="outline">
<mat-label>Country</mat-label>
<mat-select [(ngModel)]="selectedCountry" (change)="changeCountry($event)">
<mat-option *ngFor="let country of Countries">{{country.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>State</mat-label>
<mat-select (change)="changeState($event)">
<mat-option *ngFor="let state of states">{{state.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>City</mat-label>
<mat-select>
<mat-option *ngFor="let city of cities">{{city}}</mat-option>
</mat-select>
</mat-form-field>
依赖下拉列表-component.ts:
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-dependent-dropdown',
templateUrl: './dependent-dropdown.component.html',
styleUrls: ['./dependent-dropdown.component.css']
})
export class DependentDropdownComponent implements OnInit {
constructor(private title: Title) { }
ngOnInit() { }
selectedCountry: String = "ChooseCountry";
Countries: Array<any> = [
{
name: 'Romania',
states: [
{
name: 'Cluj',
cities: ['Cluj-Napoca', 'Dej', 'Gherla']
},
{
name: 'Sibiu',
cities: ['Sibiu', 'Avrig', 'Cisnadie']
},
{
name: 'Satu Mare',
cities: ['Baia-Mare', 'Satu-Mare', 'Carei']
},
]
},
{
name: 'United States',
states: [
{
name: 'Washington',
cities: ['Seattle', 'Vancouver', 'Kent']
},
{
name: 'Texas',
cities: ['Houston', 'El Paso', 'Dallas']
},
{
name: 'California',
cities: ['Los Angeles', 'San Francisco', 'San Diego']
},
]
},
];
states: Array<any> = [];
cities: Array<any> = [];
changeCountry(country: any) {
this.states = this.Countries.find((cntry: any) => cntry.name == country.target.value).states;
}
changeState(state: any) {
this.cities = this.Countries.find((cntry: any) => cntry.name == this.selectedCountry).states.find((stat: any) => stat.name == state.target.value).cities;
}
}
来源:https://roytuts.com/cascading-or-dependent-dropdown-using-angular/
我在这里注意到的第一个问题是您在 mat-option
上没有 value
属性。这就是所选国家/地区不会保持选中状态的原因。要解决这个问题,请在 mat-option
上添加 [value]="country"
绑定(其他下拉菜单也是如此)。
其次,mat-select
似乎没有发出任何 change
事件。查看 the docs 我猜你正在寻找 valueChange
事件。
<div class="content">
<mat-form-field appearance="outline">
<mat-label>Country</mat-label>
<mat-select [(ngModel)]="selectedCountry" (valueChange)="changeCountry($event)">
<mat-option *ngFor="let country of Countries" [value]="country">{{
country.name
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>State</mat-label>
<mat-select (valueChange)="changeState($event)">
<mat-option *ngFor="let state of states" [value]="state">{{ state.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>City</mat-label>
<mat-select>
<mat-option *ngFor="let city of cities" [value]="city">{{ city }}</mat-option>
</mat-select>
</mat-form-field>
</div>
事件处理程序也可以更简单一些:
changeCountry(country: any) {
this.states = country.states;
this.cities = [];
}
changeState(state: any) {
this.cities = state.cities;
}
我正在尝试制作一个 mat-select 级联下拉列表。 问题是,当我单击“国家/地区”下拉菜单和 select 一个选项时,它不会显示为 selected,所以我什至无法测试整个级联下拉菜单。
依赖下拉列表-component.html:
<div class="content">
<mat-form-field appearance="outline">
<mat-label>Country</mat-label>
<mat-select [(ngModel)]="selectedCountry" (change)="changeCountry($event)">
<mat-option *ngFor="let country of Countries">{{country.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>State</mat-label>
<mat-select (change)="changeState($event)">
<mat-option *ngFor="let state of states">{{state.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>City</mat-label>
<mat-select>
<mat-option *ngFor="let city of cities">{{city}}</mat-option>
</mat-select>
</mat-form-field>
依赖下拉列表-component.ts:
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-dependent-dropdown',
templateUrl: './dependent-dropdown.component.html',
styleUrls: ['./dependent-dropdown.component.css']
})
export class DependentDropdownComponent implements OnInit {
constructor(private title: Title) { }
ngOnInit() { }
selectedCountry: String = "ChooseCountry";
Countries: Array<any> = [
{
name: 'Romania',
states: [
{
name: 'Cluj',
cities: ['Cluj-Napoca', 'Dej', 'Gherla']
},
{
name: 'Sibiu',
cities: ['Sibiu', 'Avrig', 'Cisnadie']
},
{
name: 'Satu Mare',
cities: ['Baia-Mare', 'Satu-Mare', 'Carei']
},
]
},
{
name: 'United States',
states: [
{
name: 'Washington',
cities: ['Seattle', 'Vancouver', 'Kent']
},
{
name: 'Texas',
cities: ['Houston', 'El Paso', 'Dallas']
},
{
name: 'California',
cities: ['Los Angeles', 'San Francisco', 'San Diego']
},
]
},
];
states: Array<any> = [];
cities: Array<any> = [];
changeCountry(country: any) {
this.states = this.Countries.find((cntry: any) => cntry.name == country.target.value).states;
}
changeState(state: any) {
this.cities = this.Countries.find((cntry: any) => cntry.name == this.selectedCountry).states.find((stat: any) => stat.name == state.target.value).cities;
}
}
来源:https://roytuts.com/cascading-or-dependent-dropdown-using-angular/
我在这里注意到的第一个问题是您在 mat-option
上没有 value
属性。这就是所选国家/地区不会保持选中状态的原因。要解决这个问题,请在 mat-option
上添加 [value]="country"
绑定(其他下拉菜单也是如此)。
其次,mat-select
似乎没有发出任何 change
事件。查看 the docs 我猜你正在寻找 valueChange
事件。
<div class="content">
<mat-form-field appearance="outline">
<mat-label>Country</mat-label>
<mat-select [(ngModel)]="selectedCountry" (valueChange)="changeCountry($event)">
<mat-option *ngFor="let country of Countries" [value]="country">{{
country.name
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>State</mat-label>
<mat-select (valueChange)="changeState($event)">
<mat-option *ngFor="let state of states" [value]="state">{{ state.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>City</mat-label>
<mat-select>
<mat-option *ngFor="let city of cities" [value]="city">{{ city }}</mat-option>
</mat-select>
</mat-form-field>
</div>
事件处理程序也可以更简单一些:
changeCountry(country: any) {
this.states = country.states;
this.cities = [];
}
changeState(state: any) {
this.cities = state.cities;
}