Блог

У меня есть файл json, содержащий объекты, у которых есть подобные подобъекты :

 [
  {
    "index": 0,
    "name": "Médecine et spécialités médicales",
    "specialties": [
      {
        "id": 0,
        "name": "Médecine interne"
      },
      {
        "id": 1,
        "name": "Maladies infectieuses"
      },
      {
        "id": 2,
        "name": "Carcinologie médicale"
      }
    ]
  },
  {
    "index": 1,
    "name": "Chirurgie et spécialités chirurgicales",
    "specialties": [
      {
        "id": 0,
        "name": "Chirurgie générale"
      },
      {
        "id": 1,
        "name": "Chirurgie carcinologique"
      },
      {
        "id": 2,
        "name": "Chirurgie thoracique"
      }
    ]
  }
]
 

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

вот stackblitz, над которым я работаю, значение выбранного элемента отображается в виде числа, как я могу получить значение в виде поля имени строки?

В соответствии с вашим стеком, в котором вы передаете значение индекса, а не название категории, я бы сделал что-то вроде этого:

app.html:

 <ng-template [ngIf]="selectedCategory">
  <label for="category">Category</label>
  <select
    name="category"
    id="category"
    class="form-control"
    (change)="onCategorySelected($event.target.value)"
  >
    >
    <option
      *ngFor="let category of categories; index as i;"
      [value]="category.name"
    >
      {{ category.name }}
    </option>
  </select>

  <label for="specialty">Specialties</label>
  <select
    [(ngModel)]="selectedSpecialty"
    name="specialty"
    id="specialty"
    class="form-control"
    (change)="onSpecialtySelected($event.target.value)"
  >
    <option
      *ngFor="let specialty of selectedCategory.specialties;"
      [value]="specialty.name"
    >
      {{ specialty.name }}
    </option>
  </select>
</ng-template>
 

У меня был шаблон ng, чтобы избежать ошибок консоли и изменить значение первого тега select на category.name и удалите ngModel (не знаю, почему это не работает, извините).

app.ts:

 import { Component, OnInit } from "@angular/core";
import { HttpClient, HttpClientModule } from "@angular/common/http";
interface Speciality{
  name: string
}
interface Category{
  name: string,
  specialities: Speciality[]
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  categories: Category[];
  selectedCategory: Category;
  selectedSpecialty: Speciality;

  constructor(private http: HttpClient) {
    this.http.get<Category[]>("assets/json/data.json").subscribe(res => {
      this.categories = res;
      this.selectedCategory = this.categories[0]
    });
  }
  onCategorySelected(categoryName: string) {
    console.log(categoryName);
    this.selectedCategory = this.categories.find(cat => cat.name === categoryName)
  }

  onSpecialtySelected(value: string) {
    console.log(value);
    this.selectedSpecialty.name = value;
  }
}
 

Я создаю интерфейс для ввода вашей категории и специальностей, а в методе subscribe добавляю строку для инициализации вашей выбранной категории с первым объектом вашего массива категорий.
вот ссылка на stackblitz

вы можете использовать средство получения. это вы создаете функцию

   categories: any=[]; //<--initizalize your variable with a empty array
  get categoryName()
  {
    const cat=this.categories.find((_,index)=>index==this.selectedCategory)
    return cat?cat.name:null
  }
 

Затем каждый раз, когда вы пишете в .html

 {{categoryName}} //you see the category selected
 

И вы можете забыть все свои (изменить) в select. Кстати, удалите также [selected]=»i» в вашем .html. Вы используете [(ngModel)], поэтому вам не нужно выбирать

ваш разветвленный стекблитц