角度2：自定义管道中断

Question

问题陈述

在两个角度表达式{{fruits}}和{{fruits | sortStringPipe:'asc' }}上都应用了自定义管道，但是它仅应在我在表达式中传递pipe符号的第二个角度上应用。

代码库

  

mypipecomponent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'cts-mypipecomponent',
  templateUrl: './mypipecomponent.component.html',
  styleUrls: ['./mypipecomponent.component.css']
})
export class MypipecomponentComponent implements OnInit {

  fruits = ['mango','apple','banana','papaya','kiwi']

  constructor() { }

  ngOnInit() {
  }

}

  

自定义管道（sort-string-pipe.pipe.ts）

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sortStringPipe'
})
export class SortStringPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    if(args === 'asc'){
      return value.sort()    

    }
    if(args === 'dsc'){
      return value.sort().reverse()
    }

    return value.sort();

  }

}

  

mypipecomponent.component.html

Unsorted Fruits: {{fruits}}
Sorted Fruits: {{fruits  | sortStringPipe:'asc'  }}

输出

Unsorted Fruits: apple,banana,kiwi,mango,papaya Sorted Fruits: apple,banana,kiwi,mango,papaya

在输出中，我们可以看到它对两个表达式都进行了排序，但仅应对{{fruits | sortStringPipe:'asc' }}进行排序。

注意：：如果我在两个表达式之间传递任何<hr>，<br>之类的HTML元素，则它可以正常工作，但我不想在表达式之间使用这些元素

Answer 1

嗯，这可能不是最优雅的解决方案，但是您可以在管道内部进行深度复制。

export class SortStringPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    let pipeArr = Object.assign([],value);

    if(args === 'asc'){
      return pipeArr.sort()    

    }
    if(args === 'dsc'){
      return pipeArr.sort().reverse()
    }

    return pipeArr.sort();

  }

}

就像@trichetriche提到的那样，这是一个有趣的错误。但是由于您不希望在html上使用br标签，因此请尝试使用此标签。

Demo

Answer 2

示例：-，

HTML文件

<p>Unsorted Fruits: {{fruits}}</p>

<p>Sorted Fruits: {{fruits  | sortStringPipe:'asc'  }}</p>

<p>descending Fruits: {{fruits  | sortStringPipe:'dsc'}}</p>

<p>Fruits(Without Mention) : {{fruits | sortStringPipe}}</p>

管道文件：-

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sortStringPipe'
})
export class SortStringPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    if(args === 'asc'){
      return value.sort()    

    }
    if(args === 'dsc'){
      return value.sort().reverse()
    }
    return value.sort();
  }
}

这是我为您量身打造的工作型柱塞， https://stackblitz.com/edit/angular-pk2rta

输出屏幕截图

我希望这会有所帮助，

谢谢

Muthukumar