0
我對Angular2/4非常陌生，並且嘗試了幾件事情。具有多個下拉的無功表格
我想使用反應形式在Angular4，我試圖讓3個下拉菜單，顯示像下面的數據： -
我想設計一個過濾器吧，這將允許用戶篩選項目基於可用的選項。
這裏有3個要素，
- 客戶（DropDown1）
- 網站（DropDown2）
- 資產（DropDown3）
的客戶有很多網站，網站有很多的資產。
方案
方案1 - 當用戶點擊客戶1，他應該看到所有在下拉
方案2中可用的網站和資產 - 當他們在用戶點擊網站1下客戶1，他應該看到在該網站只有資產
方案3 - 是一樣的2，根據客戶2站點2上的用戶點擊，他應該看到只有在這個網站
方案4的資產 - 這是一樣的如1，2，3，只是一個不同的客戶點擊。
JSON數據是象下面這樣： -
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是象下面這樣： -
<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表（在第1下拉選擇）--->網站（第二下拉已與Cutomer1網站）--->動資產（按網站）
任何幫助/指導將不勝感激。