web-dev-qa-db-fra.com

Angular 2 Pipe sous condition

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

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

Si non, quel est le moyen préféré pour obtenir cet effet?

angularconditional-statementsangular-pipeangular2-pipe
50
Daniel Kucal

Vous devez changer un peu la syntaxe:

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

Exemple de Plunker

116
Günter Zöchbauer

Comme une telle syntaxe n'est pas prise en charge, je pense que le seul moyen de le faire est d'implémenter un autre canal 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 utilisez-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 ceci plunkr: https://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview .

4
Thierry Templier

Vous pouvez aussi utiliser ngIf

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

Je trouve cela utile au cas où la ligne deviendrait trop longue.

2
ajorquera