Angular 2 管道处于状态答案

【问题标题】：Angular 2 Pipe under conditionAngular 2 管道处于状态
【发布时间】：2016-08-24 00:43:46
【问题描述】：

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

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

如果不是，实现此效果的首选方法是什么？

【问题讨论】：

我认为应该可以。你试过了吗？
是的，它会导致模板解析错误。

标签： angular conditional-statements angular-pipe angular2-pipe

【解决方案1】：

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

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

【讨论】：

在这种情况下，它是一种变通方法而不是实际解决方案，但可能对更复杂的情况有用，+1
是的，你是对的！ Günter 的解决方案更适合简单的用例 ;-)

【解决方案2】：

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

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

Plunker example

【讨论】：

我可以在 ngFor 中使用它吗？例如：<div *ngFor="let item of data | slice:0:20">。我只需要在某些情况下应用过滤器
当然，*ngFor 也可以使用。
谢谢@GünterZöchbauer *ngFor="let a of (condition ? (arr | pipe) : (arr | pipe2))"
非常好的陛下！
Wahnsinn Günter，einfach Wahnsinn！ Vielen Dank！

【解决方案3】：

你也可以使用ngIf

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

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

【讨论】：

您可以将替换为以便只有文本是有条件的，第一种情况下不包含任何标记。

【解决方案4】：

正如其他人指出的，您可以使用{{condition ? (value | pipe1) : (value2 | pipe2 )}} 的语法。

但值得知道的是，管道的格式参数也可以是动态的。例如这是可以以高精度或低精度格式化的数字的示例。条件被传递给一个方法，该方法将有条件地创建一个格式化文本。

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

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

所以，是的，您可以使用条件在 2 个管道之间进行选择。但在某些情况下，您可能更喜欢（或只需要）使用一个带有条件格式参数的管道。。

【讨论】：