How to update client side angular5 array using array.filter?

Question

I am implementing array filtering in Angular5.

Here is my component.ts

 ngOnInit() {
 this.getFileDetails();
 this.recordsCopy = this.records;
}

getFileDetails() {
this.appService.fetchFileDetails(this.filename).then((resp: any) => {
  if (resp.success) {
    this.records = resp.data;
    this.records.map(item=>{
      item.editable = false;
     })
   }
  });
 }

  nameSearchFilter(event : any){
    const val = event.target.value.toLowerCase();
    console.log(val);
    this.recordsCopy  = this.records.filter(function (d) {
     return d.Name.toLowerCase().indexOf(val) !== -1 || !val;
  });
 }

Here is my component.html

<div class="tale-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Speciality</th>
              <th>Credentials</th>
              <th>City</th>
            </tr>
         </thead>
          <tbody>
              <tr>
                <td>
                  <input type="text" class="form-control"  (keyup)='nameSearchFilter($event)'/>
                </td>
                <td>
                  <input type="text" class="form-control"/>
                </td>
                <td>
                  <input type="text" class="form-control" />
                </td>
                <td>
                  <input type="text" class="form-control"/>
                </td>
              </tr>
            </tbody>
        </table>
      </div>

      <div class="table-responsive">
<div class="table">
  <tr>
    <th>Name</th>
    <th>Speciality</th>
    <th>Credentials</th>
    <th>City</th>
  </tr>
  <tr *ngFor="let record of records">
    <td>{{record.Name}}</td>
    <td>{{record.Specailty}}</td>
    <td>{{record.Credentials}}</td>
    <td>{{record.City}}</td>
  </tr>
</div>

I am implementing array filtering on keyup angular event so that as user starts type then array should display table filtration real time. But it is not working. Where i am mistaking in my code?

Answer 1

You are permanently modifying your data source.

The easiest non-angular way of doing this would be to create a filteredRecords copy that you only assign, while still filtering your original records.

this.filteredRecords = this.records.filter(...)

If you wanted to be more angulary, you could make a filter pipe that does this for you on the way to your template.