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

Question

我正在尝试构建一个具有行业下拉菜单的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对象的打字稿文件，我想连接到此列表。这是打字稿文件的内容：

export class Industry {
id: Number;
name: String;

industry = [
  {id: 1, name: "Aerospace"},
  {id: 2, name: "Banking"},
  {id: 3, name: "CapitalMarkets"},
  {id: 4, name: "Chemicals"},
  {id: 5, name: "Defence"},
  {id: 6, name: "Education"},
  {id: 7, name: "Gaming"},
  {id: 8, name: "Government"},
  {id: 9, name: "Healthcare"},
  {id: 10, name: "Insurance"},
  {id: 11, name: "Media"},
  {id: 12, name: "Mining"},
  {id: 13, name: "Resources"},
  {id: 14, name: "Retail"},
  {id: 15, name: "Telecommunications"},
  {id: 16, name: "Utilities"}
  ]
}

目前，下拉列表功能正常，但与预期的一样，但是当我喜欢'create button'时。什么都没发生。我无法弄清楚如何将每个下拉选项绑定到相应的JSON对象。我已经在下面看到了对此的使用，我已经尝试过了，但是我无法让它为我工作：

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

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

我才刚起步，所以能提供任何帮助。作为。我具有初学者水平的知识，能否请您解释一下答案。预先感谢！

Answer 1

假设您有一些要从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);
  }
}

我创建了一个具有DataService方法的getDataById。这将id作为参数，然后返回Observable<Array<any>>。然后，将其分配给Component类的data$属性。

我可以使用data$管道在组件模板中打开async属性。像这样的东西：

<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>

此外，也可以使用*ngFor结构化指令遍历数组中的每个项目并呈现mat-option，而不是对行业数组中的每个项目进行硬编码。

希望这有助于消除您的疑虑。

---

这里是Working Sample StackBlitz供您参考。