在我的 Angular 2 应用程序中，表格显示中的数据会多次重新加载，我遇到了一些问题。我认为主要问题与这样一个事实有关，即在初始组件加载时，我正在为一系列过滤器发送数据以及网络请求。

基本上，我们正在使用 Mongo/Mongoose 功能，它允许我们在发布请求的对象主体中传递键/值对，然后返回基于这些传入值的过滤数据集。此代码如下所示:

private processType(name: string, value: any, body)
{
    if (this.body[name] && !value) {
            delete this.body[name];
        } else {
            this.body[name] = { $in: value };
        }
} 

一切都按预期工作。然而，在我当前的实现中感觉不太理想的是，在初始组件加载时，我为每个过滤器传递了一个包含所有可能值的数组。从那里，用户可以通过 UI 过滤器列表更改传递和过滤的内容。我在初始组件加载时为每个过滤器传递了整个可能值数组，因为如果我传递一个空数组，则没有任何匹配项。但是，似乎应该有更好的方法来处理我最初的请求。

理想情况下，我希望我的初始请求实际上是“最初不对任何内容进行过滤”，而不是像我现在所做的那样“最初对所有内容进行过滤”。我现在已经这样做了，因为处理初始加载条件和用户删除过滤器或所有过滤器的情况有点棘手。现在，在任何一种情况下，我只是再次传递所有可能值的数组。我有什么工作，但它似乎并不像它应该的那样优雅。由于这一切都作为一个对象传递到发布请求的正文中，有没有一种方法可以只删除该对象而不是传递一个包含所有值的数组的对象？

这是我其余相关代码的样子:

public initLanguageFilterOptions(): void
{
    this.languageFilterOptions = new FilterOptions([
        { value: 'English', toString: () => 'English' },
        { value: 'Spanish', toString: () => 'Spanish' },
        { value: 'Mandarin', toString: () => 'Mandarin' }
    ]);

    let arr = [];

    // Update array when filter selection is made
    arr.push(this.languageFilterOptions.addEventListener(FilterOptions.CHANGE_EVENT, () => this.sendLangSelections(true)));

    // Update array when filter options are loaded from URL parameters
    arr.push(this.languageFilterOptions.addEventListener(FilterOptions.URL_LOAD_EVENT, () => this.sendLangSelections(true)));

    // Clean up after component is no longer used
    this.addEventListener('ngOnDestroy', function ()
    {
        arr.forEach(s => s()); // Remove all listeners
        return true;
    }.bind(this));

}

/**
* Handles the emitting of the selected values to the API
*/
private sendLangSelections(languageFilterOptions) {
    const origLangArray = ['English', 'Spanish', 'Mandarin'];
    if (languageFilterOptions)
        {
            let selectionsArray = this.languageFilterOptions.selection;
            let values = selectionsArray.map((a) => { return a.value; });
            if (values && values.length > 0)
                {
                    this.sendLanguage.emit(values);
                }
            else if (values && values.length < 1)
                {
                    this.sendLanguage.emit(origLangArray);
                }
        }
}

这是我对 Mongo/Mongoose/Node 后端的 API 调用:

// A POST request to work with observables
public obsPost(strReq, page, pagesize, body, sort?) {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: this.headers });
    return this.http.post
    (`${API.URL}/${API.VER}${strReq}?apikey=${API.KEY}&page=${page}&pagesize=${pagesize}`,
    body, options)
        .map((res: Response) => res.json())
        .catch(this.filterErrorHandler);
}
    filterErrorHandler(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

最佳答案

要实现这一点，需要在值通过 { $in: value } 传递时添加更多条件逻辑。由于弹出的错误是由于 { $in: value } 的格式问题，关键是要确保只有在有值要传递时才会触发。

所以，最后，为了让这个工作 - 而不必传递所有可能值的数组，这不是一个优雅或高性能的解决方案 - 我改变了这个:

private processType(name: string, value: any, body)
{
    if (this.body[name] && !value) {
            delete this.body[name];
        } else {
            this.body[name] = { $in: value };
        }
}

...为此:

private processType(name: string, value: any, body)
{
    if (this.body[name] && !value || this.body[name] && value.length < 1) {
            delete this.body[name];
        } else if (value) {
            this.body[name] = { $in: value };
        }
}

这样做基本上是确保在触发 { $in: value } 时，至少包含一个值的数组可用。

唯一需要的其他更改是涉及当用户取消选择所有值时发出的内容。我是这样处理的:

private sendLangSelections(languageFilterOptions) {
    const origLangArray = ['English', 'Spanish', 'Mandarin'];
    if (languageFilterOptions)
        {
            let selectionsArray = this.languageFilterOptions.selection;
            let values = selectionsArray.map((a) => { return a.value; });
            if (values && values.length > 0)
                {
                    this.sendLanguage.emit(values);
                }
            else if (values && values.length < 1)
                {
                    this.sendLanguage.emit(this.obj = undefined);
                }
        }
}

关于javascript - 一种更优雅的方式来处理 Angular 应用程序中的过滤值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45869108/