Question

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

我也在下面查看了Dynamic Forms，但他们让我困惑： -

https://angular.io/guide/dynamic-form

问题： -

如何将数据放入这些下拉列表中（我只能为客户名称执行此操作）
我应该使用动态表单方法吗？
我将如何选择以下情景： -

Customer1（在第一个下拉列表中选择）---＆gt;网站（第二个下拉列表包含与Cutomer1相关的网站）---＆gt;资产（按网站划分的资产）

任何帮助/指导都将不胜感激。

Answer 1

我不相信你需要为这种方法使用动态表单。

我的方法只是你的html文件中的所有逻辑。

<div class="container">
  <div class="row">
    <h1>Customer Details</h1><br>

    <form [formGroup]="myForm" novalidate>

      <div class="col-md-4" >
        <select  formControlName="customernames">
          <option *ngFor="let user of userData" [ngValue]="user">
            {{user.name}}
          </option>
        </select>
      </div>

      <div class="col-md-4">
        <select  formControlName="sites"  >
          <option *ngFor="let site of myForm.get('customernames').value.sites" [ngValue]="site">
            {{site.name}}
          </option>
        </select>
      </div>

      <div class="col-md-4" >
        <select formControlName="assets" >
          <option *ngFor="let asset of myForm.get('sites').value.assets" [ngValue]="asset">
            {{asset.name}}
          </option>
        </select>
    </form>

  </div>
</div>

这不是一个强大的解决方案，但希望能给你一个想法。

具有多个下拉列表的活动表单

1 个答案: