Angular 2 상태의 파이프

Angular 2 상태의 파이프

Angular 2에서 조건부로 파이프를 적용하는 것이 가능합니까?저는 다음과 같은 일을 하고 싶습니다.

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

그렇지 않은 경우 이러한 효과를 얻기 위해 선호되는 방법은 무엇입니까?

구문을 약간 변경해야 합니다.

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

플런커 예제

ngIf를 사용할 수도 있습니다.

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

저는 줄이 너무 길어질 때 유용하다고 생각합니다.

다른 사람들이 지적했듯이, 당신은 다음의 구문을 사용할 수 있습니다.{{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}`;
  }

예, 조건을 사용하여 두 개의 파이프 중에서 선택할 수 있습니다. 그러나 경우에 따라 조건부 형식 매개 변수가 있는 파이프 하나를 사용하는 것을 선호할 수도 있습니다.

이러한 구문은 지원되지 않으므로 조건을 처리하기 위해 다른 파이프를 구현하는 것이 유일한 방법이라고 생각합니다.

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

다음 플런크r을 참조하십시오. https://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview

언급URL : https://stackoverflow.com/questions/36928435/angular-2-pipe-under-condition