属性'type'在管道搜索按类型导致的类型 'unknown' 错误上不存在

Question

我收到各种错误，如p

类型'unknown'不存在属性

在我做 之后

离子构建-prod -释放

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>

当我使用我创建的过滤器时出现问题| 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);
}

过滤管

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);
}
});
}
}

我得到这个错误，如果我把

filterByType: mediaType |

如果我为NGFOR删除这一行，我没有得到任何错误，但是我需要过滤器。有提示吗?

感谢

Answer 1

这可能不是直接的答案，但我邀请您做一个小方法来复制，我可以更深入地挖掘为什么这不起作用。

作为一种可能更好的替代方法，你最好对按钮上使用的filter()函数做出反应，并在此时用一个新的引用

修改ngFor的数组。

this.topMedia = results
this.topMediaFiltered = results
[...]
filter(mediaType: string) {
this.topMediaFiltered = this.topMedia.filter(it => it.type === mediaType) || [];
this.mediaType = mediaType;
}

在模板中使用topmediafiled而不是topMedia