时间戳

首页 > 解决方案 > 如何使另一个下拉菜单依赖于角度过滤器

angular - 如何使另一个下拉菜单依赖于角度过滤器

问题描述

如何使 angular 中的过滤器依赖另一个下拉列表。我有多个下拉列表，它们相互依赖。我正在使用反应形式。

   <select (change)="checkFirstDropdown()" formControlName="id" class="FormControl cond-size">
                  <option value="null" disabled >Please Select Option</option>
                  <option [ngValue]="noneDropDown" selected>
                    none
                  </option>
                  <ng-container *ngIf="checkMainIndex==0">
                  <ng-container *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator">
                    <option *ngIf="conditionsOperatorElement.conditionsOperatorId==1"  [ngValue]="conditionsOperatorElement.conditionsOperatorId"
                    >{{
                      conditionsOperatorElement.title
                    }}</option>
                  </ng-container>
                </ng-container>
                <ng-container *ngIf="checkMainIndex!=0">
                  <option  [ngValue]="conditionsOperatorElement.conditionsOperatorId"
                    *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator">{{
                      conditionsOperatorElement.title
                    }}</option>
                </ng-container>
                </select>

标签： angularformsdropdownangular-reactive-forms

解决方案

我想我有一个解决方案给你。你可以在你的change函数上做到这一点。这是我的示例代码和stackblitz 演示链接。

HTML：

<h1>Reactive forms SELECT-OPTIONS</h1>
<h2>Tracking simple string</h2>
<form [formGroup]="form">
    <label>Country:</label><br>
    <select formControlName="country" (change)="checkFirstDropdown($event.target.value)">
        <option *ngFor="let country of countries" [value]="country.id">
            {{ country.name }}
        </option>
    </select>
     <br>  <br>
     <label>City</label><br>
     <select formControlName="city" >
        <option *ngFor="let city of cities" [value]="city.id">
            {{ city.city }}
        </option>
    </select>
</form>

TS：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Country} from './country';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  countries = [
    {
      id: 'us',
      name: 'United States'
    },
    {
      id: 'uk',
      name: 'United Kingdom'
    },
    {
      id: 'ca',
      name: 'Canada'
    }
  ];

  cities=[];
  form = new FormGroup({
    country: new FormControl(),
    city: new FormControl()
  });
  
  checkFirstDropdown($event){
     this.cities=cityList.filter(c=>c.cid===$event);
      let  itm=this.cities[0];
      this.form.controls['city'].setValue(itm.id);
     console.log($event);
  }
}

export const cityList = [
  {
    id: "1",
    cid: 'ca',
    city: "toronto",
  },
  {
    id: "2",
     cid: 'ca',
    city: "Vancouver",
  
  },
  {
    id: "3",
    cid: 'us',
    city: "New York City",
  },
  {
    id: "4",
     cid: 'us',
    city: "Los Angeles",
  
  },
  {
    id: "5",
    cid: 'uk',
    city: "London",
  },
  {
    id: "6",
    cid: 'uk',
    city: "BRIGHTON",
  }
];

推荐阅读