Как привязать параметры выбора к объекту JSON, используя Angular? - PullRequest
Новая
       82

Как привязать параметры выбора к объекту JSON, используя Angular?

0 голосов
/ 21 октября 2019

Я пытаюсь создать веб-приложение с выпадающим меню отраслей. Вот как выглядит мой текущий список: 

<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"}
  ]
}

В настоящее время выпадающий список функционирует, но, как и ожидалось, но когда я нажимаю кнопку «Создать». Ничего не произошло. Я не могу понять, как привязать каждый из выпадающих опций к соответствующему объекту JSON. Я видел использование этого ниже, которое я пробовал, но я не могу заставить его работать на меня: 

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

В идеале мне нужно иметь возможность выбрать объект (либо связанный со списком по значению)имени или чего-то еще) и загрузите json при нажатии кнопки create.

Я только начинаю, поэтому любая помощь приветствуется. Как . У меня есть знания начального уровня, не могли бы вы объяснить свои ответы. Заранее спасибо!

1 Ответ

0 голосов
/ 21 октября 2019

Предполагая, что у вас есть некоторые данные, которые вы собираетесь получить из REST API, вы можете вызвать API в методе loadJSON: 

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>>. Затем я назначил его свойству data$ класса Component.

Я могу развернуть свойство data$ в своем шаблоне компонентов, используя трубу async. Примерно так: 

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

Кроме того, вместо жесткого кодирования каждого отдельного элемента в массиве отраслей, я могу использовать структурную директиву *ngFor для циклического обхода элементов вмассив и рендеринг mat-option

Надеюсь, что это помогает и очищает ваши сомнения.

Вот Рабочий пример StackBlitz для вашей ссылки.

...