Angular 2 Pipe条件下

Question

在Angular 2中是否可以在条件下应用管道？我想做的事情如下：

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

如果没有，实现这种效果的首选方法是什么？

Answer 1

你需要稍微改变一下语法：

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

Plunker example

Answer 2

由于不支持这样的语法，我认为唯一的方法是实现另一个管道来处理这个条件：

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

看到这个plunker：qazxsw poi。

Answer 3

你也可以使用https://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview

ngIf

如果线条变得太长，我发现它很有用。