根据另一个下拉菜单更改下拉选项 angular

Question

我在一个预订网站上工作，我有两个 select 下拉框，其中有 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>

COMPONENT.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,"] }
  ];

STACKBLITZ：https://stackblitz.com/edit/flight-date-pikcer

我无法找到完成这项工作的方法。感谢您的支持！

Answer 1

将第一个下拉列表绑定到属性出发点

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

在打字稿中

public departure: string;

对于第二个下拉菜单：-

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

Answer 2

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 )
   }
}

Answer 3

如果你只有几个元素，你可以使用 [ngValue]，但首先你需要改变你的 "options" 就像

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

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

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

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

根据另一个下拉菜单更改下拉选项 angular

Change dropdown options based on another dropdown angular

data-binding

option

dropdown

angular