Ionic 属性'type'不存在于类型'unknown'上,错误是由Pipe searchByType所造成

uoifb46i  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(276)

我收到各种错误,如P
属性在类型'unknown'上不存在
在我做之后
离子生成-生成-释放

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'">

超文本标记语言

<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>

使用创建的过滤器时出现问题|按类型筛选:介质类型
时间

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

如果我将
按类型筛选:介质类型|
如果我删除这行的NGFOR我没有得到任何错误,但我需要过滤器。任何提示?
谢谢

nbysray5

nbysray51#

这可能不是直接的答案,但我邀请你做一个小的方式来复制,我可以深入挖掘为什么这不工作。
作为一种替代方法(可能是更好的方法),您最好对按钮上使用的filter()函数做出React,并在此时使用新引用修改ngFor数组

this.topMedia = results
this.topMediaFiltered = results

[...]

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

在模板中使用topMediaFiltered而不是topMedia

相关问题