Можно ли в Angular 2 применить трубу по условию? Я бы хотел сделать что-то вроде:
{{ variable.text | (variable.value ? SomePipe : OtherPipe) }}
Если нет, то как лучше всего добиться этого эффекта?
Можно ли в Angular 2 применить трубу по условию? Я бы хотел сделать что-то вроде:
{{ variable.text | (variable.value ? SomePipe : OtherPipe) }}
Если нет, то как лучше всего добиться этого эффекта?
Вам нужно немного изменить синтаксис:
{{variable.value ? (variable.text | SomePipe) : (variable.text | pipe2)}}
<div *ngFor="let item of data | slice:0:20">
. Мне нужно применить фильтр только в некоторых случаях
- person Mr.7; 08.09.2017
*ngFor
.
- person Günter Zöchbauer; 08.09.2017
*ngFor="let a of (condition ? (arr | pipe) : (arr | pipe2))"
- person Mr.7; 08.09.2017
Вы также можете использовать ngIf
<span *ngIf="variable.value; else elseBlock">{{ variable.text | SomePipe }}</span>
<ng-template #elseBlock>{{ variable.text | OtherPipe }}</ng-template>
Я считаю это полезным, если очередь становится слишком длинной.
Поскольку такой синтаксис не поддерживается, я думаю, что единственный способ сделать это - реализовать другой канал для обработки условия:
@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 .
Как указывали другие, вы можете использовать синтаксис {{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}`;
}
Итак, да, вы можете использовать условие для выбора между двумя трубками. Но в некоторых случаях вы можете предпочесть (или вам нужно только) использовать один канал с параметром условного формата..