I have been working on creating a custom search filter in my Angular project, and it was functioning properly. However, I encountered an error in my Visual Studio Code. In my previous project, everything was working fine until I updated my CLI, which resulted in this error message. How can I resolve this issue?

Thank you in advance.

Type 'unknown' is not assignable to type 'any[] & Iterable'

https://i.sstatic.net/FCHFi.png

I am using Angular 11.

<section *ngIf="!spinner; else showspinner">
    <div class="w-100 px-5">
        <div class="p-3">
            <label>Email</label>
            <input
                type="text"
                name="email"
                placeholder="Search By Email"
                class="form-control"
                id=""
                [(ngModel)]="searchText"
             />
        </div>
     </div>

    <div class="table-responsive">
        <table class="table table-hover table-bordered table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Enrolment-Id</th>
                    <th>Course</th>
                    <th>Python/Sql</th>
                    <th>Statistics</th>
                    <th>ML</th>
                    <th>Mid-Term Objective</th>
                    <th>Mid-Term Subjective</th>
                    <th>Final Assessment</th>
                    <th>Project Ability</th>
                    <th>Internship Ability</th>
                    <th>Live Session Attendance</th>
                    <th>Internship Attendance</th>
                    <th><a> view </a></th>
                    <th><a> Download </a></th>
                </tr>
            </thead>
         <tbody>
            <tr *ngFor="let item of response | email: searchText">
                 <td>{{ item.name }}</td>
                 <td>{{ item.email }}</td>
                 <td>{{ item.phone }}</td>
                 <td>{{ item.enrolmentid }}</td>
                 <td>{{ item.course }}</td>
                 <td>{{ item.pythonsql }}</td>
                 <td>{{ item.statistics }}</td>
                 <td>{{ item.ml }}</td>
                 <td>{{ item.midtermobj }}</td>
                 <td>{{ item.midtermsubj }}</td>
                 <td>{{ item.finalassessment }}</td>
                 <td>{{ item.projectability }}</td>
                 <td>{{ item.internshipability }}</td>
                 <td>{{ item.livesessionattendance }}</td>
                 <td>{{ item.internshipattendance }}</td>
                 <td>
                     <a [routerLink]="['../details', item._id]" routerLinkActive="router-link-active">
                         <span class="badge badge-success">View</span>
                     </a>
                 </td>

                 <td>
                     <a href="javascript:void(0)" (click)="download(item._id)">
                         <span class="badge badge-danger">Download</span></a>
                 </td>
              </tr>
          </tbody>
       </table>
   </div>
 </section>
 <ng-template #showspinner>
     <app-spinner></app-spinner>
 </ng-template>

component.ts

response: any;
      searchText: any;
      spinner: boolean = false;

      record() {
          this.spinner = true;
          this.get_data_service.get_record().subscribe((res: any) => {
              if (res.err) {
                   console.log(res.message);
                  this.spinner = false;
               } else {
                   this.response = res.data;
                   this.spinner = false;
               }
              console.log(res);
           });
       

pipe.ts

@Pipe({
  name: 'email',
})
export class EmailPipe implements PipeTransform {
    transform(item: any, searchValue?: string): unknown {
        // console.log('pipe');
        if (searchValue === undefined) {
            return item;
        }
        return item.filter((i: any) => {
            let data = i.email
                .replace(/\s+/g, '')
                .toLowerCase()
                .includes(searchValue.toLocaleLowerCase().replace(/\s+/g, ''))
                ? i
                : '';
            return data;
        });
    }
}
    

package.json

 "dependencies": {
        "@angular/animations": "~11.0.6",
        "@angular/common": "~11.0.6",
        "@angular/compiler": "~11.0.6",
        "@angular/core": "~11.0.6",
        "@angular/forms": "~11.0.6",
        "@angular/platform-browser": "~11.0.6",
        "@angular/platform-browser-dynamic": "~11.0.6",
        "@angular/router": "~11.0.6",
        "bootstrap": "^4.5.3",
        "file-saver": "^2.0.5",
        "jquery": "^3.5.1",
        "rxjs": "~6.6.0",
        "tslib": "^2.0.0",
        "zone.js": "~0.10.2"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.1100.6",
        "@angular/cli": "~11.0.6",
        "@angular/compiler-cli": "~11.0.6",
        "@types/file-saver": "^2.0.1",
        "@types/jasmine": "~3.6.0",
        "@types/node": "^12.11.1",
        "codelyzer": "^6.0.0",
        "jasmine-core": "~3.6.0",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "~5.1.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.0.3",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "protractor": "~7.0.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "~4.0.2"
      }