有条件的Angular 2管道

73

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

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

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

— 丹尼尔·库卡尔（Daniel Kucal）
source

我认为应该可以。你有没有尝试过？

— 君特Zöchbauer

1

是的，这会导致模板解析错误。

— Daniel Kucal

164

您需要稍微更改语法：

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

柱塞示例

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

我可以在ngFor中使用它吗？例如：<div *ngFor="let item of data | slice:0:20">。我仅在某些情况下需要应用过滤器

— Mr.7

1

当然，也可以使用*ngFor。

— 君特Zöchbauer

5

谢谢@GünterZöchbauer*ngFor="let a of (condition ? (arr | pipe) : (arr | pipe2))"

— Mr.7

1

父亲，真好！

— Khateeb321

1

WahnsinnGünter，einfach Wahnsinn！Vielen Dank！

— 寂寞

7

您也可以使用ngIf

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

我发现它在行过长的情况下很有用。

— 阿约克拉
source

3

您可以将<span>替换为<ng-container>，这样只有文本才是有条件的，在第一种情况下不会包含任何标记。

— 路易斯·阿西图诺

5

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

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

请参阅以下代码：https ://plnkr.co/edit/KPIA5ly515xZk4QZx4lp ? p = preview 。

— 蒂埃里·坦佩利（Thierry Templier）
source

2

在这种情况下，它不是实际的解决方法，但是可以解决，但对于更复杂的情况可能有用，+ 1

— Daniel Kucal

你是对的！Günter的解决方案更适合简单的用例；-)

— Thierry Templier，2016年

3

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

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

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

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

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

— 视频数据库
source