Angulaire 2 Tuyau sous condition

Question

Est-il possible dans Angular 2 d'appliquer un tuyau sous condition ? Je voudrais faire quelque chose comme :

{{ variable.text | (variable.value ? SomePipe : OtherPipe) }}

Si ce n'est pas le cas, quelle est la meilleure façon d'obtenir cet effet ?

Answer 1

Vous devez changer un peu la syntaxe :

{{variable.value ? (variable.text | SomePipe) : (variable.text | pipe2)}}

Exemple de Plunker

Answer 2

Vous pouvez également utiliser ngIf

<span *ngIf="variable.value; else elseBlock">{{ variable.text | SomePipe }}</span>
<ng-template #elseBlock>{{ variable.text | OtherPipe }}</ng-template>

Je le trouve utile au cas où la file d'attente deviendrait trop longue.

Answer 3

Comme d'autres l'ont fait remarquer, vous pouvez utiliser la syntaxe de {{condition ? (value | pipe1) : (value2 | pipe2 )}} .

Mais il est bon de savoir que le paramètre de format d'un tube peut également être dynamique. Par exemple, voici un exemple de nombre qui peut être formaté avec une précision élevée ou faible. La condition est passée à une méthode, qui va créer un texte de formatage de manière conditionnelle.

  // in template
  {{ value | number:getFormat(true) }}

  // in .ts
  public getFormat(highPrecision = false): string {
    const digits = highPrecision ? 3 : 2;
    return `1.${digits}-${digits}`;
  }

Donc, oui, vous pouvez utiliser une condition pour choisir entre deux tubes. Mais dans certains cas, vous pouvez préférer (ou n'avoir besoin) d'utiliser qu'un seul tube avec un paramètre de format conditionnel. .

Answer 4

Comme cette syntaxe n'est pas prise en charge, je pense que la seule façon de procéder est d'implémenter un autre tube pour gérer la condition :

@Pipe({
  name: 'condition'
})
export class ConditionPipe {
  transform(val,conditions) {
    let condition = conditions[0];
    let conditionValue = conditions[1];

    if (condition===conditionValue) {
      return new Pipe1().transform(val);
    } else {
      return new Pipe2().transform(val);
    }
  }
}

Et utilise-le de cette façon :

@Component({
  selector: 'app'
  template: `
    <div>
      {{val | condition:cond:1}}<br/>
    </div>
  `,
  pipes: [ Pipe1, Pipe2, ConditionPipe ]
})
export class App {
  val:string = 'test';
  cond:number = 1;
}

Voir ce plunkr : https://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview .