如何在 Angular 中存储超过通过 Output() 和 EventEmitter() 传入的最新值？

Question

我在 Angular 应用程序中使用自定义输出在组件之间发送用户选择的值。现在有效的是，每次用户单击一个复选框项目时，该值都会发送到我的子组件，我可以在其中看到它打印到控制台。问题是，当用户单击另一个选择时，我会发送该值，但现在 returns 未定义之前发送的值。换句话说，我只会获得最新的价值。我的问题是：我如何存储这些传递下来的值，以便我可以使用每个用户选择的值构建一个过滤器列表，而不仅仅是最近的一个？

这些值通过 Angular 的 Output() 和 EventEmitter() 向下传递到子组件，并发送到 "getFilters($event)" 函数，如下所示：

    <div class="page-content">
            <list [records]="records" 
                (sendChange)="getFilters($event)"
                (sendLanguage)="getFilters($event)"
                (sendBranch)="getFilters($event)"
                (sendZipcode)="getFilters($event)">
            </list>
    </div>

我试过接收这些值，然后将它们存储在变量中。但是当我控制台记录这些变量时，我仍然只看到最近的选择。如何存储所有选择以便能够构建新查询？

getFilters(page, language, zipcode, branch) {
    const paged = page;
    const lang = language;
    const zip = zipcode;
    const city = branch;
    console.log('Stored: ' + paged + ' ' + lang + ' ' + zip + ' ' + city);
}

所以，如果 "zipcode" 是最后一个传入的值，这就是我在控制台中看到的 - （所有其他先前发送的值现在都是 "undefined"）：

Stored: 90001 undefined undefined undefined undefined

Answer 1

<div class="page-content">
            <list [records]="records" 
                (sendChange)="getFilters($event,'page')"
                (sendLanguage)="getFilters($event,'language')"
                (sendBranch)="getFilters($event,'zipcode')"
                (sendZipcode)="getFilters($event,'branch')">
            </list>
    </div>
constructor() {
this.prevValues = [];
}
getFilters(value,type) {
 if(type == 'page')
  this.prevValues.push({'page':value});
if(type == 'language')
  this.prevValues.push({'language':value});
if(type == 'zipcode')
  this.prevValues.push({'zipcode':value});
if(type == 'branch')
  this.prevValues.push({'branch':value});
}

您可以获取上一个值，例如 this.You 将获取一个对象数组。

如何在 Angular 中存储超过通过 Output() 和 EventEmitter() 传入的最新值？

How do I store more than the most recent value passed in via Output() and EventEmitter() in Angular?

javascript

angular

typescript

eventemitter