我有一个Angular 6应用程序选择一个城市(我称之为西班牙语corregimiento),取决于地区,并根据this JSON file省选择地区。
<!-- ***************SELECT Province *************** -->
<mat-form-field>
<mat-select placeholder="Provincia" [(ngModel)]="selectedProvince" name='shit' [(value)]="sltdProv">
<mat-option *ngFor="let item of datas" [value]="item.distritos" >
{{ item.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- ***************SELECT District *************** -->
<mat-form-field *ngIf='selectedProvince'>
<mat-select placeholder="Distrito" [(ngModel)]="selectedDistr" name='District'>
<mat-option *ngFor="let distrito of sltdProv" [value]="distrito.corregimientos">
{{ distrito.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- ***************SELECT City *************** -->
<mat-form-field *ngIf='selectedDistr && selectedProvince'>
<mat-select placeholder="Corregimiento" [(ngModel)]="selectedCorr" name='Corr'>
<mat-option *ngFor="let sub of selectedDistr" [value]="sub.name">
{{ sub.name }}
</mat-option>
</mat-select>
</mat-form-field>
在Components文件中我有:
selectedProvince: string;
selectedDistr: string;
selectedDistrict: string;
datas: any;
ngOnInit() {
const Semester = this.getFile.getJSON();
this.http
.request("../../assets/jsonFolder/panamaData.json")
.subscribe((res: Response) => {
this.datas = res.json().provincia;
这将选择文件中JSON的第一个(也是唯一的)值。这是一个包含13个JSON对象的数组,每个对象都是省和省。
我可以在DOM上做到完美。但是,如果我只想将省的名称保存为变量,它会给我一些JSON对象。各区也一样。唯一好的是城市,因为最后一个是一个字符串。
我在你的JSON文件中发现了一些问题。它有Duplicate'name'变量
id:04 -> id:04-1 -> id:04-1-01
项目。你还可以添加样本plunker链接,它将有助于调试问题。