时间戳

首页 > 解决方案 > 如何根据用户输入过滤 Angular 视图中的数据？

javascript - 如何根据用户输入过滤 Angular 视图中的数据？

问题描述

我想根据用户搜索参数在Angular 7/8中显示数据。最初视图应该是空白的，但是当用户输入搜索参数并单击提交按钮时，应该使用新的/过滤的信息更新视图。

所需的方法：空ArrayB应填充 ArrayA 的过滤数据

执行：

ArrayA = [{id:1, Name:"Steve"},{id:2, Name:"Maureen"},{id:3, Name:"Damian"},{id:4, Name:"Dee"}];
ArrayB = [];

HTML 代码：

<div class="container">
    <div class="row">
        <form class="form" [formGroup]="filterForm" >
            <label for="">ID</label>
            <input type="text" name="person_id" formControlName="person_id" id="person_id">
            <button type="submit" (click)="submit($event)">Submit</button>
        </form>
    </div>
    <div class="row">
        <div class="col-12" ngFor="let filteredArr of ArrayB">{{filteredArr.name}}</div>
    </div>
</div>

当我单击提交时，应根据用户提供的 ID 过滤 ArrayA 并将其推送到ArrayB并使用新信息更新视图。

    submit(event){
//Filter ArrayA and push to ArrayB
    }

如果有更好、更简单的方法来实现同样的目标，我将不胜感激

标签： javascriptarraysangular

解决方案

您可以使用.filter()方法：

let filteredUserID = this.form.get('person_id').value
this.ArrayB = this.ArrayA.filter(item => item.id == filteredUserID))

推荐阅读