I am trying to make some custom search filter in my angular project it work fine, but in my vscode I got an error. In my previous project, it works fine after I update my cli I got an error like this. How can I solve this error?
Thanks in advance
Type 'unknown' is not assignable to type 'any[] & Iterable'
I use 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> Downlode </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)="downlode(item._id)"
><span class="badge badge-danger">Downlode</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"
}
