Угловые зависимые поля выбора не работают - PullRequest
Новая
       25

Угловые зависимые поля выбора не работают

1 голос
/ 05 мая 2019

Первая коробка работает хорошо. Но второй не работает. Они зависят друг от друга. И ошибка не появляется.

Я не могу попробовать больше ничего, потому что нет ошибок.

city.service.ts 

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CityService {

  constructor(private http:Http) { }
      getCitys(){
    return this.http.get("http://localhost:3003/api")
      .map(response => response.json());
  }
}

city.ts 

export interface City 
  { 
   name: string,
   value:number,
   down: Down[]
  }
export interface Down
         {
   name: string,
   value:number,
   places: Places[]
}

  export interface Places    
          {
   name: string;
   pname:string;
   unvan: string
  }

city.component.ts 

@Component({
  selector: 'app-city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.css']
})
export class CityComponent implements OnInit {
  cityDatas: [];
downDatas: [];
placesDatas: [];

  constructor(private cityService: CityService) { }

  ngOnInit() {
           this.cityService.getCitys().subscribe(d => { 
        this.cityDatas = d;
        this.downDatas = d.down;
        this.placesDatas = d.places });

  }


}

city.component.html 

  <select [(ngModel)]="selectedData">
    <option [ngValue]="null" selected disabled>First</option>
      <option *ngFor="let data of cityDatas" [value]="data">
        {{ data.name }}
      </option>
    </select>

            <select [(ngModel)]="selectedDw" >
      <option [ngValue]="null"  selected disabled>Second</option>
        <option *ngFor="let dw of downDatas" [value]="dw">
          {{dw.name}}
        </option>
    </select>

и API JSON 

[
      {"name":"City1",
      "value":1,
      "down":
        [{"name":"Down11",
        "value":101,
        "places":
          [{"name":"Place111",
            "pname":"JustPlace",
            "unvan":"center"
          },
        {"name":"Place112",
            "pname":"Jp",
            "unvan":"center"
          }]
        },
{"name":"Down12",
        "value":102,
        "places":
          [{"name":"Place121",
            "pname":"Jp",
            "unvan":"side"
          },
        {"name":"Place122",
            "pname":"Jp",
            "unvan":"side"
          }]
        }
      ]
      },
            {"name":"City2",
      "value":2,
      "down":
        [{"name":"Down21",
        "value":103,
        "places":
          [{"name":"Place211",
            "pname":"Jp",
            "unvan":"center"
          },
        {"name":"Place212",
            "pname":"Jp",
            "unvan":"center"
          }]
        },
{"name":"Down22",
        "value":104,
        "places":
          [{"name":"Place221",
            "pname":"JustPlace",
            "unvan":"side"
          },
        {"name":"Place222",
            "pname":"Jp",
            "unvan":"side"
          }]
        }
      ]
      }
     ]

Когда я выбираю первый, я хочу, чтобы второй работал. И я хочу, чтобы результаты отображались. Но я не смог запустить второй блок выбора, и консоль не выдавала никаких ошибок. Почему не работает? И как это будет работать?

Ответы [ 2 ]

1 голос
/ 05 мая 2019

downDatas равно undefined, поскольку d в подписке - array, а не object. Попробуйте реализовать это следующим образом (после выбора selectedData в первом выборе эти данные будут доступны во втором): 

<select [(ngModel)]="selectedData">
  <option selected disabled>First</option>
  <option *ngFor="let data of cityDatas; index as i;" [value]="i">
    {{ data.name }}
  </option>
</select>

<select [(ngModel)]="selectedDw" >
  <option [ngValue]="null"  selected disabled>Second</option>
  <option *ngFor="let dw of cityDatas[selectedData]?.down" [value]="dw">
    {{ dw.name }}
  </option>
</select>

stackblitz

0 голосов
/ 05 мая 2019

Вам необходимо реализовать change событие города, выберите тег и обновите datasource для downDatas 

onChange($event, cityid) {
   let selectedcity = this.cityDatas.filter(c=>c.value == cityid)[0];
   console.log(JSON.stringify(selectedcity))
   this.downDatas = selectedcity.down;
  }

HTML 

<select [(ngModel)]="selectedData" #city (change)="onChange($event, city.value)">

Демо https://stackblitz.com/edit/angular-city-down?file=src/app/app.component.ts

...