Angular2 在收到数据后应用 Pipe

Question

我有一个Object用于管理从后端接收的数据。它以 display: false 的所有字段启动，如果我从服务器收到该特定字段，我最终会将其更改为 true。

filterGroups（初始）：

export let filterGroups: any = {
    genericFilters: {
        iboId: {
            'display': false,
            'template': ''
        },
        iboCode: {
            'display': false,
            'template': 'text/iboCode'
        },
        iboName: {
            'display': false,
            'template': 'text_input_iboName'
        },
        iboSurname: {
            'display': false,
            'template': 'text_input_iboSurname'
        },
        iboRank: {
            'display': false,
            'template': 'select/multi_iboRank',
        },
        iboEmail: {
            'display': false,
            'template': 'text_input_iboEmail'
        },
        iboNewsletter: {
            'display': false,
            'template': 'select/simple_iboNewsletter',
        },
    },
    orderFilters: {
        iboTotalOrders: {
            'display': false,
            'template': 'compound/iboTotalOrders',
        }
    },
    peFilters: {
        iboTotalPE: {
            'display': false,
            'template': 'checkbox/iboTotalPE',
        }
    },
};

在我的模板中，我想要 div 个过滤器组。在这种情况下，我们有 3 个过滤器组：genericFilters、orderFilters 和 peFilters.

一旦我从服务器（我在 constructor 中调用）收到数据，就会修改此 Object。

因此，在我从 异步调用 .

收到数据后，我的 filterGroups 将如下所示

filterGroups（异步调用后）：

export let filterGroups: any = {
    genericFilters: {
        iboId: {
            'display': true,
            'template': ''
        },
        iboCode: {
            'display': true,
            'template': 'text/iboCode'
        },
        iboName: {
            'display': true,
            'template': 'text_input_iboName'
        },
        iboSurname: {
            'display': true,
            'template': 'text_input_iboSurname'
        },
        iboRank: {
            'display': false,
            'template': 'select/multi_iboRank',
        },
        iboEmail: {
            'display': true,
            'template': 'text_input_iboEmail'
        },
        iboNewsletter: {
            'display': false,
            'template': 'select/simple_iboNewsletter',
        },
    },
    orderFilters: {
        iboTotalOrders: {
            'display': true,
            'template': 'compound/iboTotalOrders',
        }
    },
    peFilters: {
        iboTotalPE: {
            'display': false,
            'template': 'checkbox/iboTotalPE',
        }
    },
};

现在，在我的模板中我有这个：

模板 (HTML):

<div *ngFor="let group of filterGroups | keysCheckDisplay">
    <div>
        <h4>{{group.key}}</h4>
    </div>
</div>

而且，很明显，这是我的 @Pipe。

@管子:

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

@Pipe({name: 'keysCheckDisplay'})
export class KeysCheckDisplayPipe implements PipeTransform {
    transform(value, args: string[]): any {
        let keys = [];
        for (let key in value) {
            if (!isNullOrUndefined(value[key])) {
                let display = false;
                for (let keyChild in value[key]) {
                    if (!isNullOrUndefined(value[key][keyChild]) && value[key][keyChild]['display'] === true) {
                        display = true;
                        break;
                    }
                }
                if (display === true) {
                    keys.push({key: key, value: value[key]});
                }
            }
        }
        return keys;
    }
}

在这个 @Pipe 中，如您所见，我做了几件事：

遍历 filterGroups object
检查 object 中的每个组是否存在 child 和 display: true。

功能：

我希望这个 @Pipe 循环遍历我的 Object 和 return 我 'filter groups' 至少有 1 个元素 display: true.

问题：

@Pipe 正在获取 filterGroups object 的第一个版本，并且忽略了 object 在我收到来自服务器。

如果我修改 filterGroups object.

的初始值，@Pipe 工作正常

我试过的：

研究，研究，研究
我将 @Pipe 更改为 inpure，但我讨厌这个解决方案，因为它的性能很糟糕，而且它进入了无限循环。
我也试过这种方法： *ngFor="let group of filterGroups | async | keysCheckDisplay"。但它引发了以下错误：

Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

可能的解决方案？

修改@Pipe?
修改初始object?
创建第二个 @Pipe 来循环第一个 Pipe 的结果？

我希望它是详细和清晰的，如果不是，请不要急于发表评论要求更多细节，我很乐意更新 post。

先谢谢你！

Answer 1

纯管道仅在数据更改时调用。这意味着 "data" 是一个新的对象实例。如果仅修改了对象的内容，则 Angular 更改检测不会将其识别为更改，也不会调用管道。

可能的方法

使管道不纯：通常对性能造成相当大的负担
像这样复制对象：

var tmp = this.data; this.data = {}; Object.assign(this.data, tmp);

向管道添加附加参数并更新参数值

*ngFor="let item of data | myPipe:counter"

// updated `data`
// this.counter++;

Angular2 在收到数据后应用 Pipe

Angular2 applying Pipe after data is received

typescript

angular4

angular