Население города выпадает в соответствии с условиями в angular5

Question

Я хочу отобразить название города в поле выбора в соответствии со страной в предыдущем окне выбора. Я отобразил страны в первом окне выбора, но при событии щелчка я не могу отобразить города, я не знаю, как это сделать. получить доступ к вложенному json в html. Пожалуйста, помогите.

Это мой файл JSON

  [
   { 
  "countryName": "India", 
    "cities": [
      { 
          "id": 1, 
          "name": "Banglaore", 
          "founded": -200, 
          "beautiful": true, 
          "data": 123,
          "keywords": ["Kaveri", "River"] 
      },
      { 
          "id": 1, 
          "name": "Pune", 
          "founded": 0, 
          "beautiful": false, 
          "data": "no",
          "keywords": ["FSDF", "FS"] 
      }
  ]
},
{ 
  "countryName": "US", 
  "cities": [
      { 
          "id": 2, 
          "name": "CA", 
          "founded": -200, 
          "beautiful": true, 
          "data": 123,
          "keywords": ["RT", "SSF"] 
      },
      { 
          "id": 2, 
          "name": "NY", 
          "founded": 0, 
          "beautiful": false, 
          "data": "no",
          "keywords": ["GSG", "DG"] 
      }
  ]
}
]

Файл app.component.ts -

import { Component } from '@angular/core';
import { Http,Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  constructor(private http: Http) { }
public myData;
public v;

ngOnInit(){

 this.http.get("assets/file.json")
  .map((res:Response)=> res.json())
  .subscribe(data =>{this.myData = data})

}



onChange(event): void {  // event will give you full breif of action
  const newVal = event.target.value;
this.v =newVal;















}
}

файл app.html -

<select (change)="onChange($event)" >
    <option value="0">--All--</option>
    <option *ngFor="let d of myData">
        {{d.countryName}}
    </option>
  </select>
  <br/>


  <br/>

  <select >
        <option value="0">--All--</option>
        <option *ngFor="let object of myData" value="object.countryName" [selected]="object.countryName === v">{{object.cities}}</option>
    </select>

Answer 1

У меня есть некоторая путаница с cities и states, но я думаю, что это то, что вы ищете;

В вашем первом выпадающем списке вам нужно что-то вроде этого:

<select (change)="onChange($event)" >
  <option value="0">--All--</option>
  <option *ngFor="let d of myData" [value]="d" >
    {{d.countryName}}
  </option>
</select>

Таким образом, значение ваших опций соответствует countryName, ваш метод onChange гарантирует, что свойство v будет установлено на объект (с указанием страны и города) при его изменении

<select =>
  <option value="0">--All--</option>
  <option *ngFor="let city of v.cities" value="object.countryName">{{city.name}}</option>
</select>

Некоторые побочные замечания: - вы в настоящее время «связываете» свои операторы rxjs (и изменяете прототип Observable), так как RxJs версии 5.5.6 вы можете вместо этого «транслировать» их, я думаю, что этот способ использования операторов со временем исчезнет. Так что, если вы можете изменить это, это поощряется. - Вы используете «старый» способ извлечения данных через Http, теперь HttpClient приветствуется. - Посмотрите на Reactive Forms в Angular, это сделает ваш код чище и легче рассуждать о

Учитывая мои замечания, у вас может быть что-то вроде этого:

export class AppComponent {
    form = new FormGroup({
        country: new FormControl('', [Validators.required]),
        city: new FormControl('', [Validators.required])
    })

    data$ = this.httpClient.get('assets/file.json').pipe(share());

    countries$ = this.data$.pipe(
        map(data => data.map(entry => entry.countryName)),
        startWith([])
    );

    cities$ = this.form.get('country').valueChanges.pipe(
        withLatestFrom(this.data$)
        map(([selectedCountry, allData]) => {
            const entry = allData.find(item => item.countryName === selectedCountry);
            return entry.cities;
        })
        startWith([])
    );

    constructor(private httpClient: HttpClient) { 
    }
}

Вам нужно будет добавить formControlName свойств к выбранным, и для параметров выбора потребуется труба async. Используя форму с formControls, вам не нужно иметь событие onChange. countries$ get сгенерировано из результата вызова данных, а cities$ get сгенерировано значением ValueChanges of countrySelect +, принимающим последнее значение вызова данных. Это довольно элегантно.