使用Angular 4根据第一个下拉列表选择第二个下拉列表

Posted 2023-03-25

【中文标题】使用Angular 4根据第一个下拉列表选择第二个下拉列表

【英文标题】：Select second dropdown based on first dropdown using Angular 4

【发布时间】：2018-09-21 02:31:39

【问题描述】：

我有两个使用来自服务器的数据填充的下拉列表。第一个下拉列表包含一个州，第二个包含城市。就像我选择一个州名一样，只有该州的城市应该使用 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>

【问题讨论】：

希望对您有所帮助plnkr.co/edit/ctWfT7rnWw2RaSW063TJ?p=preview

我想在角材料中使用它

【参考方案1】：

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

在您的情况下，您需要对上面的示例进行更改，即使用服务器中的数据填充国家/城市地图。

【讨论】：

你能用角材料吗

只需将<select> 更改为<mat-select> 并将<option> 更改为<mat-option>。

我试过了，但选择第一个下拉菜单后，第二个下拉菜单没有显示

添加[value]绑定到<mat-option>

【参考方案2】：

您应该将点击事件添加到您所在州的保管箱中，例如

<mat-option *ngFor="let state of states" (click)="getCities(state)" [value]="state">state</mat-option>

然后将getCities(state:string) 之类的函数添加到您的 .ts 文件中，并使用此函数填充第二个 Dropbox 内容，例如

public cities : string[];
getCities(state:string) 
 this.cities = []; // empty the array first.
 this.cities.push(CITY LIST);

这样，一旦选择了一个州，它的城市就会加载到第二个保管箱中。

希望对您有所帮助。

【讨论】：

如果用户确实使用键盘交互更改了选项怎么办？您可能希望将getCities(state) 绑定到change 事件而不是click。