web-dev-qa-db-ja.com

Angular 2条件下のパイプ

Angular 2では、条件付きでパイプを適用できますか？私は次のようなことをしたいです：

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

そうでない場合、この効果を達成するための好ましい方法は何ですか？

angularconditional-statementsangular-pipeangular2-pipe
50
Daniel Kucal

構文を少し変更する必要があります。

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

プランカーの例

116
Günter Zöchbauer

そのような構文はサポートされていないため、それを行う唯一の方法は、条件を処理するために別のパイプを実装することだと思います。

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

そして、このように使用します：

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

このplunkrを参照してください： https://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview 。

4
Thierry Templier

ngIf を使用することもできます

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

行が長くなりすぎる場合に役立ちます。

2
ajorquera