Заполните имя Citi на основе названия страны в angular4? - PullRequest
Новая
       34

Заполните имя Citi на основе названия страны в angular4?

0 голосов
/ 02 мая 2018

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

Я пытался с http. Я хочу простой метод. Кто-нибудь, пожалуйста, помогите.

вот что я пытался ..

файл данных json (file.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 str1;

ngOnInit(){

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

app.component.html 

<form name="countryForm">
    <select class="form-control" id="country" formControlName="country">
        <option value="default">--Select a country--</option>
        <option *ngFor="let d of myData" [value]="d"> {{d.countryName}} </option>
    </select>
    <select>
        <option value="0">--All--</option>
        <option *ngFor="let f of myData.cities">{{f.cities.name}}</option>
    </select>
</form>

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете попробовать что-то вроде этого: 

 <form  name ="countryForm">
    <select #country class="form-control" id="country" formControlName="country">
        <option value="default">--Select a country--</option>
        <option *ngFor="let d of myData" [value]="d"> {{d.countryName}} </option>
    </select> 
  <select  >
     <option value="0">--All--</option>
     <option *ngFor="let city of country.value" [value]="city" >{{city.name}}</option>
  </select>
        </form>

Проверить аналогичный вопрос ответ https://stackoverflow.com/a/50113538/9722237

...