根据另一个下拉角度更改下拉选项答案

【问题标题】：Change dropdown options based on another dropdown angular根据另一个下拉角度更改下拉选项
【发布时间】：2020-10-05 01:56:36
【问题描述】：

我正在一个预订网站上工作，我有两个选择下拉框，其中包含 3 个相同的城市名称。根据第一个下拉列表中的选择，我希望第二个以不可能具有相等值的方式进行调整。

HTML：

<h4>Airport of Departure</h4>
    <select name="" id="">
      <option [value]="city" *ngFor="let city of opts">
        {{city.key}}
      </option>
    </select>

    <!-- chosen destination -->

    <h4>Destination (must be different than departure location)</h4>
    <select name="" id="">
      <option [value]="city" *ngFor="let city of opts">
        {{ city.key }}
      </option>
    </select>

组件.TS：

public cities = ["Warsaw", "Paris", "New York"];
  public opts = [
    { key: "Warsaw", value: ["paris,new york"] },
    { key: "Paris", value: ["warsaw,new york"] },
    { key: "New York", value: ["warsaw, paris,"] }
  ];

堆栈闪电：https://stackblitz.com/edit/flight-date-pikcer

我在想办法完成这项工作时遇到了麻烦。感谢您的支持！

【问题讨论】：

你想在第一个下拉列表的选定值中设置第二个 id 值
您需要两个选项源/目的地，绑定到列表。 When the first is selected send event to remove that city from the 2nd.

标签： angular data-binding dropdown option

【解决方案1】：

Demo 没有规定所有飞机都从一个目的地飞到任何地方，而不是使用值比使用键更好。

您可以使用自定义管道进行第二个下拉菜单，检查值数组是否区分大小写，然后过滤它

在 html 中只需给第一个下拉菜单一个 [(ngModel)] 双向绑定

第二个 html 使用管道

 <option [value]="city.key" *ngFor="let city of opts | departure : dept">

您的自定义管道

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
      name: "departure"
})
export class DeparturePipe implements PipeTransform {
   transform(value: any[], dept:string): any {
     return value.filter(x=> !dept || x.value[0].split(",").indexOf( dept.toLowerCase())>-1 )
   }
}

【讨论】：

【解决方案2】：

如果你只有几个元素，你可以使用 [ngValue]，但首先你需要改变你的“选项”，比如

public opts = [
    { key: "Warsaw", value: ["paris","new york"] },
    { key: "Paris", value: ["warsaw","new york"] },
    { key: "New York", value: ["warsaw", "paris"] }
  ];

看到 value 是一个字符串数组，而不是你所拥有的唯一字符串数组（我想是一个拼写错误）。那么你可以使用简单的

<select [(ngModel)]="departure">
      <option [ngValue]="city" *ngFor="let city of opts">
        {{city.key}}
      </option>
</select>

<select >
      <option [value]="city" *ngFor="let city of departure?.value">
        {{ city }}
      </option>
</select>

但是，请注意，“离开”获取所有对象的值，例如值为{ key: "Warsaw", value: ["paris","new york"] }

【讨论】：

【解决方案3】：

将第一个 Dropdown 绑定到属性 Departure

<h4>Airport of Departure</h4>
    <select name="" id="" [(ngModel)] = "departure">
      <option [value]="city.key" *ngFor="let city of opts">
        {{city.key}}
      </option>
    </select>

在打字稿中

公开出发：字符串；

对于第二个下拉菜单：-

<h4>Destination (must be different than departure location)</h4>
    <select name="" id="">
      <ng-container *ngFor="let city of opts">
      <option [value]="city.key" *ngIf="city.key !== departure" >
        {{ city.key }}
      </option>
      </ng-container>
    </select>

【讨论】：