代码之家 › 专栏 › 技术社区 › Rey

在Angular App中,将过滤器选择作为对象发送以返回多个值

javascript-objects typescript angular javascript

Rey · 技术社区 · 7 年前

我的Angular应用程序中有一个函数,它接收用户对各种过滤器类型的选择,然后向API发出请求,然后API返回根据这些用户选择过滤的数据。每个过滤器类型都以数组的形式返回值,因为例如,对于“location”这样的过滤器类型,用户可能同时选择“newyork”和“Los Angeles”,在这种情况下,结果如下:

location: ['New York', 'Los Angeles']

过滤器选择被传递到组件中,如下所示:

<div class="page-content">
    <table-display [records]="records"
        (sendLocation)="onFilterReceived($event, type = 'location')"
        (sendLanguage)="onFilterReceived($event, type = 'lan')">
    </table-display>
</div>

我将这些过滤器设置为一个对象,这样我就可以返回多个值,而不仅仅是一个值——因为,毕竟,如果用户为某种语言选择了过滤器,并且他们还按位置过滤结果,那么我需要在请求中传递这两个过滤器值。

然而,现在,在我当前的实现中,当我控制台记录对象时,我仍然一次只获取其中一种过滤器类型的值(语言或位置),这取决于最近发生值更改的过滤器类型。

我错过了什么?我需要如何调整此代码才能保留(即持久化)这两种过滤器类型的值?问题是我需要显式返回对象吗?我是否需要将两种不同过滤器类型的值收集到不同的函数中?还有别的吗?

一句话:我需要能够通过语言和位置的当前过滤器选择,但现在一次只有一个(最近更改的一个)保持不变。

private onFilterReceived(value: any, type: string) {
    let filtersObj = {
        language: '',
        location: ''
    };

    if (value && type === 'lan') {
        filtersObj.language = value;
    } else if (value && type === 'location') {
        filtersObj.location = value;
    } 

    console.log('filtersObj: ', filtersObj); // Currently only returns the most recent 
                             // filter selection, either language or location.
                             // I need the values for BOTH.

    // TODO Later: Collect all filter values and pass to API for filtered data
}

为了清楚地了解发生了什么,现在,如果用户从语言过滤器中选择“西班牙语”,这会打印到控制台:

filtersObj:  {language: Array(1), location: ""}

如果在控制台中展开阵列,它将:

language: ['Spanish']

如果用户随后从位置过滤器中选择“New York”,则语言值将丢失,我看到:

filtersObj:  {language: "", location: Array(1)}

当我在控制台中展开以查看阵列时,我看到:

location: ['New York']

所以,现在我一次只能得到一个:语言或位置。但我需要 二者都 价值观

1 回复 | 直到 7 年前

Muirik 7 年前

关键是使用 this 关键字。首先,只需初始化组件中的过滤器以返回空字符串——这将允许初始API调用返回所有结果:

language: any = '';
location: any = '';
zipcode: any = '';
branch: any = '';

然后,更改 onFilterReceived() 功能:

private onFilterReceived(value: any, type: string) {
    if (value && type === 'lan') {
        this.language = value;
    }
    else if (value && type === 'location') {
        this.location = value;
    }

    console.log('filtersObj: ', {language: this.language, location: this.location});
}