使用Angular 4根据第一个下拉菜单选择第二个下拉菜单 [英] Select second dropdown based on first dropdown using Angular 4

问题描述

我有两个下拉列表，其中填充了服务器中的数据.第一个下拉列表包含一个州，第二个下拉列表包含城市.就像我选择一个州名一样，只有该州的城市才能使用Angular 4在第二个下拉菜单中显示.

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

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

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>

实时演示

在您的情况下，您需要从上例中进行的更改就是使用服务器中的数据填充国家/城市地图.

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屋！