Question 21936 in Mysql Question posted in
The official MySQL documentation can be found here.

Property 'type' does not exist on type 'unknown' – Mysql

I am receiving various errors like this after I do

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 occurs when i use the filter I created | 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 getting this error if i put

filterByType: mediaType |

If I REMOVE THIS LINE FOR THE NGFOR I AM NOT GETTING ANY ERRORS BUT I NEED THE FILTER. Any hint?

Thanks

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I got it to show no errors but it doesnt seem to be the correct thing to do. Just a workaround

    I replaced

    media.type

    to

    media['type']

    If someone has a better answer please share. But it did deleted all the errors i was getting after ionic build --prod --release


  2. 0

    Production flags invoke stricter compilers.

    Null means it doesn’t exist.

    You are trying to send null to a pipe, hence the error message.

    Without a working stackblitz reproducing your error, it is challenging to provide an accurate answer, but try adding ngIf to your P tag like so.

    This will first test for existence, with null evaluating to false.

     <p class="ion-text-wrap" *ngIf="media?.message">
    {{media?.message | slice:0:2000}}
</p>
    Login or Signup to reply.
  3. 0

    change

    topMedia:any =[];

    to

    topMedia: Array<any> =[];

    this should probably solve your problem. but if you know what are you going to put inside the topMedia array, I suggest you define a Media interface and define the array like this:

    export interface Media{
    message: string;
    ...
}
...
topMedia: Array<Media> =[];

    And if you are worried about message being null you should check it with *ngIf in the container of the message or above that (e.g. like the way E. Maggini said)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search