数组的条件映射

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

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

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

这里是相册视图组件。

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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如何将flexbox项目居中排布?[重复]

2022-5-11 7:00:25

解决方案

'unionall'和'union all'的不同结果集。

2022-5-11 7:00:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索