如何使用Angular将select选项绑定到JSON对象？

我正在尝试构建一个具有行业下拉菜单的web应用程序。 这就是我当前的列表：

<mat-select placeholder="Industry" [(ngModel)]="selectedIndustry" >
<mat-option [value]="0">None</mat-option>
<mat-option [value]="1">Aerospace</mat-option>
<mat-option [value]="2">Banking</mat-option>
<mat-option [value]="3">Chemicals</mat-option>
<mat-option [value]="4">Defence</mat-option>
<mat-option [value]="5">Education</mat-option>
<mat-option [value]="6">Finacne</mat-option>
<mat-option [value]="7">Gaming</mat-option>
<mat-option [value]="8">Government</mat-option>
<mat-option [value]="9">Healthcare</mat-option>
<mat-option [value]="10">Insurance</mat-option>
<mat-option [value]="11">Media</mat-option>
<mat-option [value]="12">Mining</mat-option>
<mat-option [value]="13">Resources</mat-option>
<mat-option [value]="14">Retail</mat-option>
<mat-option [value]="15">Telecommunications</mat-option>
<mat-option [value]="16">Utilities</mat-option>
</mat-select>
<button mat-button (click)="loadJSON()">Create</button>

当前下拉列表功能正常，但与预期类似，但当我点击“创建按钮”时。什么也没发生。我不知道如何将每个下拉选项绑定到相应的JSON对象。我已经看到了下面的用法，我已经尝试过了，但是我无法让它对我起作用：

<mat-option *ngFor="let i of Industry.industry" [value]=i>{{i.name}}</mat-option>

{{i.name}

理想情况下，我需要能够选择一个对象（通过名称或其他值链接到列表），并在单击create时加载json

---

我刚开始工作，所以非常感谢您的帮助。作为。我有初级知识，你能解释一下你的答案吗。提前谢谢

假设您有一些将从REST API获取的数据，您可以在

loadJSON

方法中调用API：

import { Component } from "@angular/core";
import { Observable } from "rxjs";

import { DataService } from "./data.service";

/** @title Select with 2-way value binding */
@Component({
  selector: "select-value-binding-example",
  templateUrl: "select-value-binding-example.html",
  styleUrls: ["select-value-binding-example.css"]
})
export class SelectValueBindingExample {
  selectedIndustry;
  industries = [
    { id: 1, name: "Aerospace" },
    ...
  ];
  data$: Observable<Array<any>>;

  constructor(private dataService: DataService) {}

  loadJSON() {
    this.data$ = this.dataService.getDataById(this.selectedIndustry);
  }
}

另外，我可以使用

*ngFor

结构指令循环数组中的项目，并呈现

mat选项，而不是硬编码industries数组中的每个项目

希望这有助于消除你的疑虑


这是给你的裁判的一封信

我们在这里谈论的是什么？您有一些示例数据要处理吗？目前没有，最终是的，每个对象都会有更全面的json属性，但为了尝试首先绑定它，我只有“Id”和“name”。请检查我的答案是否有用。仅供参考：使用[ngValue]而不是[value]为了防止字符串为null，所以我不会将其连接到API。我计划将所有json对象存储在应用程序中。因此，我希望能够使用loadJSON（）方法从json对象的typescript文件中调用所选对象。你的解决方案可能吗？也谢谢你的解决方案！我建议不要那样做。将所有这些数据正确地存储在应用程序上会使包的大小膨胀。这可能会导致我们不希望的应用程序加载时间过长。因此，我仍然建议将数据存储在某个地方，然后通过RESTAPI将其公开，以便通过网络获取相关数据。如果仍然希望数据是本地的，还必须从数组中找到相关对象。如果你愿意的话，我会用这个方法更新我的答案。是的，我非常感激。在这一点上，它更像是一个概念验证应用程序。再次感谢你帮助我！这里是更新的，如果你对答案满意，请考虑将其标记为解决方案，以关闭循环。
import { Component } from "@angular/core";
import { Observable } from "rxjs";

import { DataService } from "./data.service";

/** @title Select with 2-way value binding */
@Component({
  selector: "select-value-binding-example",
  templateUrl: "select-value-binding-example.html",
  styleUrls: ["select-value-binding-example.css"]
})
export class SelectValueBindingExample {
  selectedIndustry;
  industries = [
    { id: 1, name: "Aerospace" },
    ...
  ];
  data$: Observable<Array<any>>;

  constructor(private dataService: DataService) {}

  loadJSON() {
    this.data$ = this.dataService.getDataById(this.selectedIndustry);
  }
}

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select placeholder="Industry" [(ngModel)]="selectedIndustry">
    <mat-option disabled>None</mat-option>
    <mat-option 
      *ngFor="let industry of industries" 
      [value]="industry.id">
      {{ industry.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<button mat-button (click)="loadJSON()">Create</button>

<p>You selected: {{selected}}</p>

<pre *ngIf="(data$ | async) as data">
  {{ data | json }}
</pre>