如何从选择框数据中获取选定项的值答案

【问题标题】：How to get Selected item value from a selectBox data如何从选择框数据中获取选定项的值
【发布时间】：2021-03-25 06:06:34
【问题描述】：

我有一个 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，所选项目的值显示为数字，我怎样才能将值作为字符串名称字段？

【问题讨论】：

标签： arrays json angular select drop-down-menu

【解决方案1】：

您可以使用吸气剂。那就是你创建一个函数

  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

您可以在选择中忘记所有（更改）。顺便说一句，还要删除 .html 中的 [selected]="i"。您正在使用 [(ngModel)]，因此您无需选择

your forked stackblitz

【讨论】：

【解决方案2】：

根据您的 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 模板来避免控制台错误并通过 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 方法中添加一行以使用您的类别数组的第一个对象初始化您的 selectedCategory。这是stackblitz的链接

【讨论】：