Question

我正在尝试显示电影类别，但出现错误：无法读取未定义的'forEach'属性，但是我的代码按预期运行。我不知道为什么在Google chrome中检查时会弹出此错误。

Category-list.pipe.ts

import { Pipe } from '@angular/core';

@Pipe({
    name: 'categoryList'
  })
  export class CategoryListPipe {
    transform(mediaItems) {
      var categories = [];
      mediaItems.forEach(mediaItem => {
        if (categories.indexOf(mediaItem.category) <= -1) {
          categories.push(mediaItem.category);
        }
      });
      return categories.join(', ');
    }
  }

media-item-list.component.html

<nav>
    <a (click)="getMediaItems('')">
      All
    </a>
    <a (click)="getMediaItems('Movies')">
      Movies
    </a>
    <a (click)="getMediaItems('Series')">
      Series
    </a>
  </nav>

  <header 
  [ngClass]="{'medium-movies':medium === 'Movies', 'medium-series':medium === 'Series'}">
   {{ medium }}
   {{ mediaItems | categoryList }} 
</header>

<section>
  <app-media-item
  [ngClass]="{'medium-movies': mediaItem.medium==='Movies', 'medium-series':mediaItem.medium==='Series'}" 
  *ngFor="let mediaItem of mediaItems"
  [mediaItem]="mediaItem"
  (delete)="onMediaItemDelete($event)"></app-media-item>
</section>

Answer 1

管道的transform方法甚至在填充mediaItems之前就运行了。这就是为什么您会收到该错误的原因。但是之后，由于再次填充了mediaItems，并且再次运行了transform方法，因此所有方法都按预期工作。

要首先获取错误，请在管道的transform方法中，检查是否定义了mediaItems。如果已定义，则仅执行操作。然后按其他方式发送mediaItems（因为它的值为null）。

如何解决错误TypeError：无法读取Angular中未定义的属性“ forEach”？

1 个答案: