0
votes

Modifier les options de liste déroulante en fonction d'une autre liste déroulante angulaire

Je travaille sur un site de réservation où j'ai deux listes déroulantes de sélection avec 3 noms de villes identiques. En fonction des choix de la première liste déroulante, je veux que la seconde s'ajuste d'une manière qu'il n'est pas possible d'avoir des valeurs égales.

HTML:

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

COMPONENT.TS:

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

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

J'ai du mal à comprendre comment faire ce travail. Merci pour votre soutien!

angular dropdown data-binding option

2 commentaires

voulez-vous définir la deuxième valeur d'identifiant inclut dans la valeur sélectionnée de la première liste déroulante

vous avez besoin de deux options source / destinations, liées à des listes. Lorsque le premier est sélectionné, envoyez un événement pour supprimer cette ville du deuxième.

3 Réponses :

0
votes

Lier la première liste déroulante à une propriété Départ

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

Dans TypeScript

départ public: string;

Pour la deuxième liste déroulante: -

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

0 commentaires

1
votes

Démo il vaut mieux utiliser des valeurs que des clés.

Vous pouvez utiliser un tube personnalisé pour la deuxième liste déroulante qui vérifie le tableau de valeurs avec sensibilité à la casse, puis le filtre

en html, donnez simplement à la première liste déroulante une liaison bidirectionnelle [(ngModel)]

pour le deuxième tube d'utilisation html

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

votre pipe personnalisé

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

0 commentaires

1
votes

si vous n'avez que quelques éléments, vous pouvez utiliser [ngValue], mais vous devez d'abord modifier vos "options" comme

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

Voir que la valeur est un tableau de chaîne, pas un tableau d'une chaîne unique comme vous l'avez (je suppose que c'est une erreur de frappe). alors vous pouvez utiliser simple

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

Mais, attention, "départ" prend la valeur de l'objet all, par exemple a la valeur {key: "Warsaw", value: ["paris", "new york"]}

0 commentaires