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

Question

这个问题已经有答案了:

Angular 7 filter array (2 个回答)

已关闭 3 年前。

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

期望的方法:空的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 中，并使用新信息更新 View 。

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

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

Answer 1

可以使用.filter()函数来过滤arrayA然后你可以将生成的结果存储在 arrayB 中然后绑定(bind)这个arrayB给您html template 。在下面的示例中 id可以被视为来自用户的输入，当他点击 submit 时按钮，您可以触发此过滤功能来获取 arrayB .

你的html代码可以是这样的: <button (click)="clickHandler()">submit</button>

哪里clickHandler()将是您编写过滤器逻辑的函数。

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


let id = 1;

arrayB = ArrayA.filter((item)=>{
    if(item.id == id)
      return item;
    else 
      return null;
})

console.log(arrayB);