Angular 2 Труба при условии

Ответ 1

Вам нужно немного изменить синтаксис:

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

Пример плунжера

Ответ 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;
}

Посмотри этот план: https://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview.

Ответ 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}';
  }

Итак, да, вы можете использовать условие для выбора между двумя каналами. Но в некоторых случаях вы можете предпочесть (или только нужно) использовать один канал с параметром условного формата..