88

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

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

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

4

4 回答 4

193

您需要稍微更改语法:

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

Plunker 示例

于 2016-04-29T11:33:56.680 回答
7

你也可以使用ngIf

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

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

于 2019-03-13T09:22:32.943 回答
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;
}

请参阅此 plunkr:https ://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview 。

于 2016-04-29T07:09:39.163 回答
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 个管道之间进行选择。但在某些情况下,您可能更喜欢(或只需要)使用一个带有条件格式参数的管道。.

于 2019-09-06T20:56:12.017 回答