javascript - 将过滤器选择作为对象发送以在 Angular 应用程序中返回多个值

Question

我的 Angular 应用程序中有一个函数，它接受用户对各种过滤器类型的选择，然后向 API 发送请求，然后 API 返回根据这些用户选择过滤的数据。每个过滤器类型都将值作为数组返回，因为例如，对于像“位置”这样的过滤器类型，用户可能会同时选择“纽约”和“洛杉矶”，在这种情况下，这将是结果:

位置:['纽约', '洛杉矶']

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

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

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

但是，现在，在我当前的实现中，当我控制台记录对象时，我仍然一次只能获取一种过滤器类型的值(语言或位置)，具体取决于最近的过滤器类型发生了值(value)变化。

我在这里错过了什么？我需要如何调整此代码才能保留(即保留)两种过滤器类型的值？我需要明确返回对象的问题吗？我是否需要将两种不同过滤器类型的值的收集分解为不同的函数？还有别的吗？

底线:我需要能够传递针对语言和位置的当前过滤器选择，但现在一次只有一个(最近更改的一个)持续存在。

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: ""}

如果你在控制台展开数组，它是:

语言:['西类牙语']

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

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

当我展开以查看控制台中的数组时，我看到了这个:

位置:['纽约']

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

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});
}