标签: angular-pipe

我在Angular 2 RC5中实现了一个自定义管道,它处理从服务器获取的数据.我遇到的问题是管道ngOnInit在我调用服务器的地方之前执行.

作为测试,我将已填充的列表传递给Pipe,一切都按预期工作.我遇到的唯一问题是在呈现页面时执行管道.所以那个案例中的清单是空的.

有没有办法"延迟"页面的呈现,以便在管道执行时它具有从服务器检索的数据？

这是我的代码示例:

零件

ngOnInit() {
    Observable.forkJoin([
        this.testService.get(),
        this.multilingualService.get(localStorage.getItem('currentPage'))
    ]).subscribe(servicesResult => {
        this.mainList = servicesResult[0];
        this.pageMultilinguals = servicesResult[1];
    },
    error => this.handleError(error));
}

管

@Pipe({name: 'multiLang'})
export class MultilingualPipe implements PipeTransform {
    transform(value: string, pageMultilinguals: Multilingual[], context: number): string {

        for (let i = 0; i < pageMultilinguals.length; i++) {
            if (pageMultilinguals[i].reference === value && pageMultilinguals[i].contexTypeId === context) {
                return pageMultilinguals[i].value;
            }
        }
    }
}

模板

<span>{{ 'Test' | multiLang: pageMultilinguals: 9 }}</span>

我有一系列模特.在模板中我使用管道

<div class="card-panel" *ngFor="let card of cards | sortByType">
    <card-view [card]="card" [autoupdate]="true"></card-view>
</div>

在每个组件中,我都有一个更新数据的计时器.但是当模型更新时,管道不再运行.在这种情况下,有没有办法强制运行管道或做一些有角度的方式.

在卡片视图中,我有一个更新卡片变量的计时器.但Angular没有抓住这个变化来触发管道

我有这样定义的变量：myVar: Observable<Observable<MyObject>[]>。

我正在使用Angular4功能枚举异步管道

*ngFor="let obsMyObject of (myVar | async)"

现在我有MyObject的Observable，但是我只需要MyObject。我可以这样写：

<div *ngFor="let obsMyObject of (myVar | async)">
    <div *ngIf="let obsMyObject | async; let MyObject"></div>
</div>

但我无法在内部div中执行此操作，因为我正在设置flex order（对内部div没有任何影响）属性，因此我需要这样的操作：

<div *ngFor="let obsMyObject of (myVar | async); let MyObject = (obsMyObject | async)"
    [style.order]="MyObject.order">
</div>

我只是有一个想法如何做到这一点，我尝试了：

<div *ngFor="let obsMyObject of (myVar | async); let MyObject = obsMyObject)">
    {{MyObject}}
</div>

但是MyObject是未定义的，因此let MyObject = (obsMyObject | async)无法正常工作。

我正在使用带有ngx-charts数据数组的过滤器管道.数据按2个日期过滤:fromDate和toDate.当使用使数组变小的日期进行过滤时,管道工作正常,但是当我首先使用较小的日期范围过滤然后再次使范围变大时,管道不能与原始数组一起使用,而是使用已经过滤的数组.

我已经做了其他的点子,从来没有遇到过这个问题,我不确定这里出了什么问题.也许有人可以帮助我.

管:

export class DateInRangePipe implements PipeTransform {
    transform(obj: any[], from: Date, to: Date): any[] {
        if (obj && from && to) {
            obj.forEach(data => {
                data.series = data.series.filter((item: any) => {
                    return this.inRange(item.name, from, to);
                });
            });
        }
        return [...obj];
    }

    inRange(date: Date, from: Date, to: Date): boolean {
        return date.getTime() >= from.getTime() &&
            date.getTime() <= to.getTime() ? true : false;
    }
}

Chart.component.html部分

<ngx-charts-line-chart
    [view]="view"
    [scheme]="colorScheme"
    [results]="multi | dateinrangePipe: from: to"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [legend]="showLegend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel" …

我正在尝试使用 Angularcurrency管道，我想从格式化的数字中一起删除货币符号，但似乎没有选择这样做。那么有没有什么简单的方法可以在不为其编写自定义管道的情况下实现这一目标？

我将 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 事件中执行它并从组件调用管道，那么是否可以在模板中执行它？

在我的angular 4项目中，我想显示一些意大利货币，因此我使用默认的标准货币管道，例如： {{amount | currency:'EUR':true}}

但是它显示了这样格式化的数字：€12.00这不是意大利语标准，我希望这样：€12,00

正如我在文档中看到的，管道取决于i18n API，并且在我的浏览器中受支持的浏览器支持（我使用的是chrome最新）

使用this：providers: [{provide: LOCALE_ID, useValue: 'it-IT'}] 正确设置货币格式，但我不希望使用默认LOCALE。

那么，为什么此管道无法自动理解LOCALE？

为什么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 元素进行选择

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

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

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

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

现在，哪个性能更好？