Question

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

使用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”是传入的最后一个值，这就是我在控制台中看到的 - （所有其他先前发送的值现在都是“未定义”）：

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

您可以获得这样的prev值。您将获得一系列对象。

如何存储超过Angular中通过Output（）和EventEmitter（）传递的最新值？

1 个答案: