数组的条件映射

在我的图片库应用中，我试图映射一个图片数组，条件是图片相册名称与用户选择查看的相册名称相匹配。由于图片数组中的所有图片目前都被分配给了 “柬埔寨 “相册，因此当选择柬埔寨相册时可以正常工作（我已经将新的映射数组记录到控制台，并且它正确记录了所有图片）。

我遇到的问题是，当选择不同的相册时，例如 “老挝”（目前 “图像 “数组中没有该相册名称的图像），所有图像的数组仍然被记录到控制台，但所有图像都有一个未定义的值。

我很难理解为什么没有一个空数组被记录到控制台，而这是预期的行为？

这里是相册视图组件。

export class AlbumViewComponent implements OnInit {

  constructor(private route: ActivatedRoute, private albumsService: AlbumsService, private galleryListService: GalleryListService) { }

  selectedAlbum: Album;

  albumImageArr: Image[];

  images: Image[];

  ngOnInit() {
    const id = +this.route.snapshot.params['id']; 

    this.selectedAlbum = this.albumsService.getAlbum(id); // THIS GETS THE ALBUM THE USER HAS SELECTED BASED ON THE ID PARAMETER IN THE URL

    this.images = this.galleryListService.getImages(); // THE IMAGES ARE RETRIEVED FROM A SEPARATE SERVICE FILE

    this.albumImageArr = this.images.map(e => {
      if(e.album === this.selectedAlbum.name) {
        return e;
      } 
    });

    console.log(this.albumImageArr);


  }

}

这是用户选择 “柬埔寨 “专辑时 albumImageArr的控制台日志。

(18) [Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image, Image]

所以正如你所看到的，它的工作是正确的，因为它记录了一个Image对象的数组，当专辑名称与所选专辑名称相匹配时。

这是当用户选择任何其他专辑时的 albumImageArr 的控制台日志。

(18) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

—编辑 —

按照下面Michael D的要求，这里是gallery-list服务文件。

import { Image } from '../shared/image.model';

export class GalleryListService {

    private images = [
        new Image('Man Praying', 1, 'Cambodia', 'Man praying to Sun', '£100', '../../assets/Images/Cambodia/Praying to the Sun.JPG', '250px', '330px'),
        new Image('Man Praying', 2, 'Cambodia', 'Man praying to Sun', '£100', '../../assets/Images/Cambodia/Praying to the Sun.JPG', '275px', '330px'),
        new Image('Man Praying', 3, 'Cambodia', 'Man praying to Sun', '£100', '../../assets/Images/Cambodia/Praying to the Sun.JPG', '300px', '330px'),
        new Image('Man Praying', 4, 'Cambodia', 'Man praying to Sun', '£100', '../../assets/Images/Cambodia/Praying to the Sun.JPG', '275px', '330px'),

]

getImages() {
        return this.images;
    }

这是Image.model文件

export class Image {

    constructor(
        public name: string,
        public id: number,
        public album: string,
        public description: string,
        public price: any,
        public imagePath: string,
        public heightSize: any,
        public widthSize: any) {}
}

解决方案：

map 是一个一对一的函数。意思是它会将原列表中的每个元素映射到新列表中的新元素。它不能修改列表的长度。在你的函数中，你没有告诉它如何映射那些不满足谓词的元素，所以JS将它们映射到了一个新的列表中。undefined

而过滤器等双态则可以做到这一点。

this.albumImageArr = this.images.filter(e => e.album === this.selectedAlbum.name);