Угловой 2: нестандартный разрыв труб - PullRequest
Новая
       8

Угловой 2: нестандартный разрыв труб

0 голосов
/ 04 июля 2018

Постановка задачи

Пользовательская труба применяется к обоим угловым выражениям {{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>, между обоими выражениями, он работает, но я не хочу использовать эти элементы между выражениями.

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Пример: -

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

выходной снимок экрана

enter image description here

Надеюсь, это полезно,

Спасибо

Музукумар

0 голосов
/ 04 июля 2018

Ну, это может быть не самое элегантное решение, но вы можете сделать глубокое копирование внутри трубы. 

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, это интересная ошибка. Но так как вы не хотите использовать теги br в html, попробуйте использовать этот.

Демо

...