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

Question

我在Angular应用程序中有一个函数，它接受用户选择的各种过滤器类型，然后向API发送请求，然后API返回根据这些用户选择过滤的数据。每个过滤器类型都将值作为数组返回，因为，例如，对于像“location”这样的过滤器类型，用户可能同时选择“New York”和“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>

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

但是，现在，使用我当前的实现，当我控制日志对象时，我仍然只获得一个过滤器类型的值（语言或位置），具体取决于具有值的最新值更改。

我在这里错过了什么？我如何调整此代码以保持（即保持）两种过滤器类型的值？我需要显式返回对象的问题吗？我是否需要将两种不同过滤器类型的值收集到不同的功能中？别的什么？

结论：我需要能够为BOTH语言和位置传递当前过滤器选择，但是现在一次只有一个（最近更改过的）持续存在。

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']

如果用户然后从位置过滤器中选择“纽约”，语言值将丢失，我看到：

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

当我展开以在控制台中看到数组时，我看到了：

location: ['New York']

所以，现在我一次只得到一个：语言或位置。但我需要两个价值观。

Answer 1

关键是使用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});
}