Question

当我选择之后的城市时，请选择以下显示地点的地区。我正在从数组中获取数据。

我要在逐区选择城市时添加路由网址，例如website.com/city/down或website.com/city-down。

我尝试使用jquery和vue，但不能。我该怎么办？

home.html

<select [(ngModel)]="selectedCity" class="province-menu">
  <option [ngValue]="null" selected>City</option>
    <option *ngFor="let cities of city" [ngValue]="cities" 
[disabled]="cities.disable">
      {{ cities.name }}
    </option>
  </select>
  <select class="district-menu" [(ngModel)]="selectedDown" >
    <option [ngValue]="null" selected>Down</option>
    <option *ngFor="let dw of selectedCity.down" [ngValue]="dw" [disabled]="dw.disable">
    {{dw.name}}
    </option>
  </select>

home.ts

{'name':'City',
'value':1,
'down':[
  {'name':'Down',
  'value':1_1,
  'places':[
    {'name':'DownPlaces01'},
    {'name':'DownPlaces02'}  ]}]}
selectedCity = this.city[0];

  selectedDown = this.selectedCity.down[0];

 selectedPlaces = this.selectedDown.places[0];

Answer 1

我不确定100％确切地想做什么以及为什么在Angular问题中提到了Vue和jQuery，但这可能会有所帮助：

在您的html文件中，您可以将ngModelChange处理程序添加到两个下拉菜单中，如下所示：

<select
[(ngModel)]="selectedCity"
(ngModelChange)="onCitySelect($event)"
class="province-menu">
    <option [ngValue]="null" selected>City</option>
    <option
    *ngFor="let cities of city"
    [ngValue]="cities"
    [disabled]="cities.disable">
        {{ cities.name }}
    </option>
</select>

<select
[(ngModel)]="selectedDown"
(ngModelChange)="onDistrictSelect($event)"
class="district-menu">
    <option [ngValue]="null" selected>Down</option>
    <option
    *ngFor="let dw of selectedCity.down"
    [ngValue]="dw"
    [disabled]="dw.disable">
        {{dw.name}}
    </option>
</select>

和您的home.ts：

onCitySelect(city) {
    this.selectedCity = city;
    this.selectedDown = null;
}

onDistrictSelect(district) {
    this.selectedDown = district;
    this.router.navigateByUrl(`city/${this.selectedCity}/${this.selectedDown}`);
}

如何路由角度6级联下拉菜单？

1 个答案: