I keep encountering a range of errors like
roperty does not exist on type 'unknown'
after running the command
ionic build --prod --release
src/app/pages/top-media/top-media.page.ts:18:16
18 templateUrl: './top-media.page.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TopMediaPage.
Error: src/app/pages/top-media/top-media.page.html:106:36 - error TS2339: Property 'type' does not exist on type 'unknown'.
106 <ng-container *ngIf="media?.type==='T'">
html
<ion-refresher slot="fixed" (ionRefresh)="topMediaSet($event)">
<ion-refresher-content pullingIcon="circles" refreshingSpinner="crescent" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-row>
<ion-col class="ion-text-center">
<ion-button class="media-btn" mode="ios" color="danger" (click)="filter('V')">
<ion-icon slot="icon-only" name="videocam-outline"></ion-icon>
</ion-button>
</ion-col>
<ion-col class="ion-text-center">
<ion-button class="media-btn" mode="ios" color="success" (click)="filter('A')">
<ion-icon slot="icon-only" name="volume-high-outline"></ion-icon>
</ion-button>
</ion-col>
<ion-col class="ion-text-center">
<ion-button class="media-btn" mode="ios" color="tertiary" (click)="filter('T')">
<ion-icon slot="icon-only" name="document-outline"></ion-icon>
</ion-button>
</ion-col>
<ion-col class="ion-text-center">
<ion-button class="media-btn" mode="ios" color="warning" (click)="filter('P')">
<ion-icon slot="icon-only" name="camera-outline"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<ion-row *ngFor="let media of topMedia | filterByType: mediaType | slice:1; let i = index">
<ng-container *ngIf="media?.type==='T'">
{{media?.message | slice:0:2000}}
</p>
The problems occur when using the custom filter I created, specifically | filterByType: mediaType
ts
topMedia:any =[];
mediaType:string = '';
constructor(
...
) {
this.topMediaSet();
}
topMediaSet(refresher?:any) {
this.offset = 0;
if (typeof refresher == 'undefined') {
this.loading = true;
}
this.userData.topMedias(this.offset).pipe(
map((data: any) => {
if (data.success) {
this.topMedia = data.topMedia;
}
if (typeof refresher != 'undefined') {
refresher.target.complete();
}
this.loading = false;
})
).subscribe()
}
filter(mediaType: string) {
this.mediaType = mediaType;
console.log(mediaType);
}
filter pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterByType',
})
export class FilterByTypePipe implements PipeTransform {
/**
* Takes a value and makes it lowercase.
*/
transform(items: any[], type: any): any {
if (!items) return [];
if (!type) return items;
type = type.toLowerCase();
console.log('type', type);
return items.filter(it => {
if (it.type) {
return it.type.toLowerCase().includes(type);
}
});
}
}
I am facing an issue whenever I include
filterByType: mediaType |
If I REMOVE THIS LINE FROM NGFOR, I DON'T ENCOUNTER ANY ERRORS BUT I NEED THE FILTER. Any suggestions?
Appreciate your help