首页 其他开发 使用 Angular 4 根据第一个下拉列表选择第二个下拉列表
使用 Angular 4 根据第一个下拉列表选择第二个下拉列表
[英] Select second dropdown based on first dropdown using Angular 4
本文介绍了使用 Angular 4 根据第一个下拉列表选择第二个下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个下拉列表，其中填充了来自服务器的数据.第一个下拉列表包含州，第二个包含城市.就像我选择一个州名一样，只有该州的城市才能使用 Angular 4 显示在第二个下拉列表中.
<mat-tab label="基本信息"><ng-template mat-tab-label><div fxLayout="center center"><mat-icon style="font-size: 16px; line-height: 18px">gps_fixed</mat-icon>状态 </ng-template><br/><br/><br/><br/><div class="ui 流体容器" fusePerfectScrollbar><div class="内容"><mat-form-field><mat-select placeholder="State" [(ngModel)]="selectedValue" name="state" (change)="dropdownchange($event.target.value)"><mat-option>无</mat-option><mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option></mat-select></mat-form-field><br/><h3>您选择了:{{selectedValue}}</h3>
</mat-tab><mat-tab label="位置"><ng-template mat-tab-label><div fxLayout="center center"><mat-icon style="font-size: 16px; line-height: 18px">location_on</mat-icon>城市
</ng-模板><div class="ui 流体容器" fusePerfectScrollbar><div class="ui 流体容器" fusePerfectScrollbar><div class="内容"><mat-form-field><mat-select placeholder="城市"><mat-option>无</mat-option><mat-option *ngFor="let城市的城市" [value]="state">{{cities}}</mat-option></mat-select></mat-form-field><br/>
</mat-tab></mat-tab-group>
解决方案
app.component.ts
import { Component } from '@angular/core';@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {私人地图 = 新地图([['波兰', ['华沙', '克拉科夫']],['美国', ['纽约', '奥斯汀']],])国家:字符串；城市:字符串；获取国家():字符串 [] {返回 Array.from(this.map.keys());}获取城市():字符串[] |不明确的 {返回 this.map.get(this.country);}} app.component.html
<option *ngFor="let country of countries" [value]="country">{{国家}} </option></选择><select *ngIf="country" [(ngModel)]="city" [value]="city"><option *ngFor="让城市的城市">{{ city }} </option></选择> 现场演示
在您的情况下，您需要从上面的示例中进行更改，即使用服务器中的数据填充国家/城市地图.
I have two dropdowns that I populate with data from the server. The first dropdown contains a state, and the second one contains city. Like if I select one state name only cities in that state should show in 2nd drop down using Angular 4.
<mat-tab-group>
<mat-tab label="Basic Info">
<ng-template mat-tab-label>
<div fxLayout="center center">
<mat-icon style="font-size: 16px; line-height: 18px">gps_fixed</mat-icon>
State
</div>
</ng-template><br /><br /><br /><br />
<div class="ui fluid container" fusePerfectScrollbar>
<div class="content">
<mat-form-field>
<mat-select placeholder="State" [(ngModel)]="selectedValue" name="state" (change)="dropdownchange($event.target.value)">
<mat-option>None</mat-option>
<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
</mat-select>
</mat-form-field><br />
<h3>You selected: {{selectedValue}}</h3>
</div>
</div>
</mat-tab>
<mat-tab label="Location">
<ng-template mat-tab-label>
<div fxLayout="center center">
<mat-icon style="font-size: 16px; line-height: 18px">location_on</mat-icon>
City
</div>
</ng-template>
<div class="ui fluid container" fusePerfectScrollbar>
<div class="ui fluid container" fusePerfectScrollbar>
<div class="content">
<mat-form-field>
<mat-select placeholder="City">
<mat-option>None</mat-option>
<mat-option *ngFor="let cities of city" [value]="state">{{cities}}</mat-option>
</mat-select>
</mat-form-field><br />
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
解决方案
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private map = new Map<string, string[]>([
['Poland', ['Warszawa', 'Krakow']],
['USA', ['New York', 'Austin']],
])
country: string;
city: string;
get countries(): string[] {
return Array.from(this.map.keys());
}
get cities(): string[] | undefined {
return this.map.get(this.country);
}
}
app.component.html
<select [(ngModel)]="country">
<option *ngFor="let country of countries" [value]="country"> {{ country }} </option>
</select>
<select *ngIf="country" [(ngModel)]="city" [value]="city">
<option *ngFor="let city of cities"> {{ city }} </option>
</select>
Live demo
In your case all you need to change from the example above is to populate the country/cities map with the data from your server.
这篇关于使用 Angular 4 根据第一个下拉列表选择第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
