私はAngular2/4を初めて使っていて、ほとんど試していません。複数のドロップダウンがある反応的なフォーム
私はAngular4で反応性フォームを使用しようとしていますし、私は以下のようなデータを表示するために3つのドロップダウン取得しようとしています： -
私はフィルタバーをデザインしたい、ユーザーがアイテムをフィルタリングすることができます利用可能なオプションに基づいています。
3つの要素がここにあります
お客様は、多くのサイトを持っている
- お客様（DropDown1）
- サイト（DropDown2）
- 資産（DropDown3）、サイトには多くの資産を持っています。
シナリオ
シナリオ1 - ユーザーは、顧客1をクリックすると、彼はドロップダウン
シナリオ2で使用可能なすべてのサイトや資産見るべきである - 彼らユーザーがクリックサイト1上を下顧客1、彼はそのサイト
シナリオ3で資産のみが表示されるはずです - ユーザーが顧客2の下にサイト2をクリックし、2と同じです、彼は唯一、このサイトの下の資産が表示されるはずです
シナリオ4 - これは同じです1、2、3のように、別の顧客だけがクリックされます。
import { User } from './models/user'; export const DATA: User[] = [ { "id": 1, "name": "Customer 1", "sites": [ {"id": 2, "name": "Site 1", "assets": [{"id": 3, "name": "Asset 1"}] }, {"id": 4, "name": "Site 2", "assets": [{"id": 5, "name": "Asset 2"}] }, {"id": 6, "name": "Site 3", "assets": [{"id": 7, "name": "Asset 3"}] } ] }, { "id": 8, "name": "Customer 2", "sites": [ {"id": 9, "name": "Site 4", "assets": [{"id": 10, "name": "Asset 4"}] }, {"id": 11, "name": "Site 5", "assets": [{"id": 12, "name": "Asset 5"}] }, {"id": 13, "name": "Site 6", "assets": [{"id": 14, "name": "Asset 6"}] } ] }, { "id": 15, "name": "Customer 3", "sites": [ {"id": 16, "name": "Site 7", "assets": [{"id": 17, "name": "Asset 7"}] }, {"id": 18, "name": "Site 8", "assets": [{"id": 19, "name": "Asset 8"}] }, {"id": 20, "name": "Site 9", "assets": [{"id": 21, "name": "Asset 9"}] } ] } ]サービスは以下のようなものです： - - ：
import { Injectable } from '@angular/core'; import { User } from './models/user'; import { DATA } from './mock-data'; @Injectable() export class UserService { getData(): Promise<User[]> { return Promise.resolve(DATA); } }HTMLは次のようなものです： - JSONデータは以下のようなものです
<div class="container"> <div class="row"> <h1>Customer Details</h1><br> <form [formGroup]="myForm" novalidate> <div class="col-md-4" id="firstname"> <select id="customernames" formControlName="customernames"> <option *ngFor="let d of data"> {{d.name}} </option> </select> </div> <div class="col-md-4" id="firstname"> <select id="sites" formControlName="sites"> <option *ngFor="let d of data"> {{d.name}} </option> </select> </div> <div class="col-md-4" id="firstname"> <select id="assets" formControlName="assets"> <option *ngFor="let d of data"> {{d.name}} </option> </select> </div> </form> </div> </div>コンポーネントは以下のようなものです： -
import { Component, OnInit } from '@angular/core'; import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders, HttpParams, HttpRequest, HttpEventType } from '@angular/common/http'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { User } from './models/user'; import { UserService } from './app.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ data: User[]; myForm: FormGroup; constructor(private userService: UserService) { } getData(): void { this.userService.getData().then(response => this.data = response); } ngOnInit(): void { this.getData(); this.myForm = new FormGroup({ customernames: new FormControl('', Validators.required), sites: new FormControl('', Validators.required), assets: new FormControl('', Validators.required) }) } }だから私はリンク以下のように次の反応のフォームを作成しました： -
https://angular.io/guide/reactive-forms
はまた、私は以下のダイナミックフォームに見えたが、彼らは私を混乱： -
https://angular.io/guide/dynamic-form
質問： - 私は（私は顧客のためにそれを行うことができたものをドロップダウンにデータを置くことができますどのように
- 名前）
- ダイナミックフォームアプローチを使用する必要がありますか？
その後、私のようなシナリオを選択達成する方法： -
Customer1（第一ドロップダウンで選択）--->サイト（第二ドロップダウンはサイトがCutomer1に関連している）サイトごとなど--->資産（資産）
すべてのヘルプ/指導いただければ幸いです。