标签: angular-pipe

我想使用内置货币管道制作自定义货币管道。我想要使​​用的方式是{{ anyNumber | customCurrency }}.然后在我的自定义货币管道中，我想使用内置货币管道。我可以根据某些逻辑决定货币管道的参数，并且不想像{{anyNumber | currency:'USD':false:'1:0-0'}}.

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

@Pipe({
  name: 'customCurrency'
})
export class CustomCurrencyPipe implements PipeTransform {

  transform(value: any, args?: any): any {
      const defaultLocale = 'USD';
      const showSymbol = false;

      ......some logic here......      

      //HOW TO USE CURRENCY PIPE HERE?

 }

}

我将 angular 2 与primeng p-dropdown 一起使用，并且有一个案例，当用户选择父项时，我需要过滤子项下拉列表。我是用自定义管道做的

<p-dropdown [options]="carTypesOptions" [(ngModel)]="CarTypeId" name="CarTypeId"></p-dropdown>
<p-dropdown [options]="carMakeOptions | filterCarMakes: CarTypeId" [(ngModel)]="CarMakeId" name="CarMakeId"></p-dropdown>

因此，当用户选择汽车类型时，我将使用采用 CarTypeId（父选定 ID）的 filterCarMakes 管道过滤第二个下拉列表。这一切都很好。这是我的filterCarMakes管子。

@Pipe({
    name: 'filterCarMakes',
    pure: false
})
export class FilterMakesPipe implements PipeTransform {
    transform(carMakesOptions: CarMakeSelectItem[], carTypeId: string): CarMakeSelectItem[] {
        if (!carTypeId)
            return carMakesOptions.filter(p => p.carTypeId == null);
        //perform some filtering operation
        return filteredCarMakeOptions;
    }
}

问题是，如果我将 console.log 放入管道中，它会继续非常快速地在控制台上记录该消息（例如每 100 毫秒一次），这意味着即使 parent 的值没有更改，它也会继续调用。这样做的副作用是，如果有滚动，我无法在子下拉列表中选择任何值，因为它会继续刷新选项。

过滤下拉列表的简单屏幕截图如下（它不会让我滚动选择其他值并会继续刷新）

PS：我不想在 onChange 事件中执行它并从组件调用管道，那么是否可以在模板中执行它？

为什么sort函数工作正常:

<th (click)="sort('transaction_date')">Transaction Date <i class="fa" [ngClass]="{'fa-sort': column != 'transaction_date', 'fa-sort-asc': (column == 'transaction_date' && isDesc), 'fa-sort-desc': (column == 'transaction_date' && !isDesc) }" aria-hidden="true"> </i></th>

当这一个不工作时:

<th (click)="sort('user.name')">User <i class="fa" [ngClass]="{'fa-sort': column != 'user.name', 'fa-sort-asc': (column == 'user.name' && isDesc), 'fa-sort-desc': (column == 'user.name' && !isDesc) }" aria-hidden="true"> </i></th>

HTML

 <tr *ngFor="let inner of order.purchase_orders | orderBy: {property: column, direction: direction}">
        <td>{{ inner.transaction_date | date  }}</td>
        <td>{{ inner.user.name  }}</td>
 </tr>

TS

sort(property){
    this.isDesc = !this.isDesc; //change the direction    
    this.column = …

我需要提供带有动态选项的 select UI 元素，我有一个方法可以根据 Inputs 返回一个 observable

TypeScript（组件类）

getCars(type : string, engine : string) : Observable<Cars>{
    return this.carService.getCars(type,engine);
} 

在 HTML 中，我让我的元素为数据调用此方法

Html（模板文件）

<ng-select [items]="getCars(type,engine) | async"
    bindLabel="value"
    bindValue="id"
</ng-select>

但这会导致服务被无限调用。我不想使用 ngOnInit 因为我需要动态分配 observable

我正在使用此 UI 元素进行选择

我正在 Angular2 中的数组上实现过滤操作。当数组中的元素发生变化时，不会触发纯管道。因此，我必须使用不纯的管道或使用组件内部的函数进行过滤，如下所示。

*ngFor="let item of items | impureFilterPipe"

或者，

<!-- component.html -->
*ngFor="let item of filterFunction(items)"

// component.ts
sortFunction(items) { return items.sort(); }

据我所知，在模板中绑定函数在性能方面是不好的。但是，我看不出使用不纯管道而不是函数有什么区别。我想知道的是，上述两种方法之间的性能有什么不同吗？

我在一个巨大的项目中使用ngx-translate 11.x和 angular 7。

使用pipe转换时显示第一个空字符串，使用directive时显示转换字符串的第一个路径。

指导方式：<span [translate]="HELLO'"></span>

管道方式：<span >{{'HELLO'| translate}}</span>

现在，哪个性能更好？

如何在 Angular 6 库中添加自定义管道以使其在我的主应用程序中可用？目前我正在这样做：lib.module.ts：

@NgModule({
  declarations: [
    SomePipe
  ],
  exports: [
   SomePipe
]})

在 public_api.ts 中：

export * from './lib/pipes/some.pipe';

在 app.module.ts 中：

import { LibModule } from 'lib';
@NgModule({
  ...
  imports: [
    LibModule
  ]
 ...
})

我想使用管道{{ 'something' | some}}，但transform方法SomePipe不叫。

我想用逗号打印数字作为thousands, lacs,crores分隔符。例如：

     10,000 - ten thousand
   1,00,000 - 1 lakh
  10,00,000 - 10 lakh
1,00,00,000 - 1 crore

我已经使用 angular 的数字管道来实现逗号分隔的值，但没有得到正确的输出，它显示如下1,000,000 - 10 lakh。

我如何使用 angular/javascript 实现上述功能，或者在 angular 中是否有任何管道？

我正在尝试使用 Angular 11 作为可观察对象获取数据，并且在延迟加载的组件/模块中使用异步或 json 管道时遇到问题。我在控制台中收到错误消息。

模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TestRoutingModule } from './test-routing.module';
import { TestComponent } from './test.component';

@NgModule({
  declarations: [TestComponent],
  imports: [CommonModule, TestRoutingModule],
})
export class TestModule {}

组件：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
  user$: Observable<any>;

  constructor(private http: …

我做了一个PIPE如下:

import {Pipe, PipeTransform} from '@angular/core';
import { Radio } from '../../models/radio';
@Pipe({
    name: 'radioFilter'
})
export class radioFilterPipe  implements PipeTransform {

    transform(value: Radio[], args: string[]): any {

        let filter = args[0].toLocaleLowerCase();
        return filter ? value.filter(radio => radio.station.text.toLocaleLowerCase().indexOf(filter) != -1) : value;
    }
}

在我的组件中,我添加了以下代码:

import { radioFilterPipe } from './grid.station.pipe';

 pipes: [radioFilter],

但我得到一个编译错误:错误TS2304:找不到名称'radioFilter'.我究竟做错了什么？？