Angular 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' }} 进行排序。

注意：如果我在两个表达式之间传递任何 HTML 元素，例如 <hr>,<br>，那么它可以工作，但我不想在表达式之间使用这些元素。

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();
  }
}

这是我为你制作的一个可以工作的 plunker， https://stackblitz.com/edit/angular-pk2rta

输出屏幕截图

希望对你有帮助

谢谢，

穆图库马尔