Estoy trabajando en un sitio de reserva donde tengo dos cuadros desplegables seleccionados con 3 nombres de ciudad idénticos. Dependiendo de las opciones en el primer menú desplegable, quiero que el segundo se ajuste de una manera que no sea posible tener valores iguales.

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>

COMPONENTES:

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

Tengo problemas para encontrar la manera de hacer que esto funcione. ¡Gracias por tu apoyo!

0
JoseTurron 15 jun. 2020 a las 18:42

3 respuestas

La mejor respuesta

Enlazar primer menú desplegable a una propiedad Salida

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

En mecanografiado

salida pública: cadena;

Para el segundo menú desplegable: -

<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>
0
Aakash Garg 15 jun. 2020 a las 15:59

Si solo tiene unos pocos elementos, puede usar [ngValue], pero primero necesita cambiar sus "opciones" como

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

Vea que el valor es una matriz de cadena, no una matriz de una cadena única como lo ha hecho (supongo que es un error tipográfico). entonces puedes usar simple

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

Pero, tenga cuidado, "partida" obtiene el valor de todos los objetos, p. tiene el valor { key: "Warsaw", value: ["paris","new york"] }

1
Eliseo 15 jun. 2020 a las 16:56

Demo No hay ninguna regla de que todos los aviones vayan a todas partes desde un destino que usar valores. mejor que usar llaves.

Puede usar una tubería personalizada para el segundo menú desplegable que verifica la matriz de valores con mayúsculas y minúsculas y luego la filtra

En html solo dale al primer desplegable un [(ngModel)] enlace bidireccional

Para el segundo html use pipe

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

Tu pipa personalizada

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 )
   }
}
1
pc_coder 15 jun. 2020 a las 16:45