时间戳

首页 > 解决方案 > 如何解决 ERROR TypeError: Cannot read property 'forEach' of undefined in Angular？

angular - 如何解决 ERROR TypeError: Cannot read property 'forEach' of undefined in Angular？

问题描述

我正在尝试显示电影类别，但出现错误：无法读取未定义的“forEach”属性，但我的代码按预期运行。我不知道为什么我在谷歌浏览器中检查时会弹出这个错误。

类别列表.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(', ');
    }
  }

媒体项目列表.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>

标签： angularpipe

解决方案

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

为了不首先出现错误，请在您的管道transform方法中检查是否mediaItems已定义。如果已定义，则只执行操作。然后mediaItems按原样发送（因为它的值为空）。

推荐阅读