multiple mat-select from JSON data

I have an Angular 6 application that chooses a city (that I call in spanish corregimiento), depending of the district and choose district depending of the province from
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>

In Components file I have:

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;

This selects the first (and only) value of the JSON in the file. This is an array of 13 JSON objects each one is and province.

I can make it perfectly on the DOM. But if I want to save just the name of the province as a variable, it give me the array of JSON objects. And the same for the districts. The only that is good is the city because is the last one that is a string.

Source: AngularJS