Угловая 2 труба при условии

Можно ли в Angular 2 применить трубу по условию? Я бы хотел сделать что-то вроде:

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

Если нет, то как лучше всего добиться этого эффекта?


person Daniel Kucal    schedule 29.04.2016    source источник
comment
Я думаю, это должно сработать. Ты пробовал?   -  person Günter Zöchbauer    schedule 29.04.2016
comment
Да, это вызывает ошибки синтаксического анализа шаблона.   -  person Daniel Kucal    schedule 29.04.2016


Ответы (4)


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

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

Пример Plunker

person Günter Zöchbauer    schedule 29.04.2016
comment
Могу ли я использовать это внутри ngFor ?? пример: <div *ngFor="let item of data | slice:0:20">. Мне нужно применить фильтр только в некоторых случаях - person Mr.7; 08.09.2017
comment
Конечно, можно использовать и в *ngFor. - person Günter Zöchbauer; 08.09.2017
comment
Спасибо @ GünterZöchbauer *ngFor="let a of (condition ? (arr | pipe) : (arr | pipe2))" - person Mr.7; 08.09.2017
comment
@ GünterZöchbauer Привет, у меня похожая проблема, но вместо пользовательских каналов я хочу использовать встроенные. Я создал здесь вопрос stackoverflow.com/questions / 50942986 / вы можете мне помочь? - person Dekso; 20.06.2018
comment
Я хочу применить условие к выходу одной трубы и решить другую, возможно ли - person art-fan-vikram; 03.01.2019
comment
Думаю, да, но не пробовал. Ты пробовал? Это вызвало ошибку? Что ты пробовал? В чем была ошибка? - person Günter Zöchbauer; 03.01.2019
comment
Можете ли вы сказать мне, как я могу использовать канал в качестве индекса словаря. Я использую константу в качестве индекса для словаря, так как я могу использовать эту константу в качестве индекса в html? - person Suyash Gupta; 09.03.2019
comment
Очень милый сир! - person Khateeb321; 13.06.2019
comment
Wahnsinn Günter, einfach Wahnsinn! Велен Данк! - person Lonely; 24.03.2020

Вы также можете использовать ngIf

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

Я считаю это полезным, если очередь становится слишком длинной.

person ajorquera    schedule 13.03.2019
comment
Вы можете заменить ‹span› на ‹ng-container›, чтобы только текст был условным, а в первом случае разметка не включалась. - person Luis Aceituno; 06.08.2019

Поскольку такой синтаксис не поддерживается, я думаю, что единственный способ сделать это - реализовать другой канал для обработки условия:

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

person Thierry Templier    schedule 29.04.2016
comment
В данном случае это скорее обходной путь, чем реальное решение, но может быть полезен в более сложных случаях, +1 - person Daniel Kucal; 29.04.2016
comment
Да, ты прав! Решение Günter лучше подходит для простых случаев использования ;-) - person Thierry Templier; 29.04.2016

Как указывали другие, вы можете использовать синтаксис {{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}`;
  }

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

person bvdb    schedule 06.09.2019