Question

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

Answer 1

app.component.ts

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

app.component.html

this.table = $('#dataTable').DataTable({stateSave: true});
        var self = this;
        this.table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();

            let row = self.table.row(this).child(
              $('<tr id="thisIsAChildRow"></tr>' )[0]
            ).show();

        } );

Live demo

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

Answer 2

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

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

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

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

通过这种方式，只要选择了一个州，它的城市就会加载到第二个保护箱内。

希望它有所帮助。

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

2 个答案: