Question

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

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>

我已将这些过滤器设置为对象，因此我可以返回多个值而不只是一个 - 因为，毕竟，如果用户为某种语言选择了过滤器，并且它们也会过滤结果location，然后我需要在请求中传递这两个过滤器值。

但是，现在，在我当前的实现中，当我在控制台上记录对象时，我仍然只能获取其中一种过滤器类型的值（语言或位置），具体取决于最近的那个有一个价值变化。

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

底线：我需要能够为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
}

只是为了清楚地说明发生了什么，现在，如果用户选择了西班牙语＆＃39;从语言过滤器，打印到控制台：

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

如果你在控制台中展开数组，那就是：

language: ['Spanish']

如果用户选择“纽约”＆＃39;从位置过滤器，语言值丢失，我看到：

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

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

1 个答案: