Как маршрутизатор угловой 6 каскадный выпадающий? - PullRequest
Новая
       15

Как маршрутизатор угловой 6 каскадный выпадающий?

0 голосов
/ 13 января 2019

Когда я выбираю Город после, затем выбираю Район, показывающий места ниже. Я получаю данные из массива.

Я хочу добавить URL-адрес маршрутизации, например 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];

1 Ответ

0 голосов
/ 13 января 2019

Я не уверен на 100%, что именно вы хотите сделать и почему вы упомянули Vue и jQuery в вопросе Angular, но это может помочь:

В своем 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}`);
}
...