Условное отображение массива

Question

В моем приложении для создания фотогалереи я пытаюсь сопоставить массив изображений при условии, что имя альбома изображений совпадает с именем альбома, который пользователь выбирает для просмотра. Поскольку все изображения в массиве изображений в настоящее время назначены альбому «Камбоджа», это правильно работает при выборе альбома «Камбоджа» (я записал новый сопоставленный массив на консоль, и он правильно регистрирует все изображения).

Проблема, с которой я сталкиваюсь, заключается в том, что при выборе другого альбома, такого как «Лаос» (в котором в настоящее время нет изображений в массиве «изображений» с таким названием альбома), тогда массив всех изображений все еще вошел в консоль, но все с неопределенным значением.

Я изо всех сил пытаюсь понять, почему в консоль не записан пустой массив, и это было ожидаемое поведение?

Вот компонент просмотра альбома:

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]

--- Edit ---

В соответствии с просьбой Михаэля Д. ниже, это файл службы списка галерей:

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

Answer 1

map - это функция «один к одному». Это означает, что каждый элемент в исходном списке будет сопоставлен с новым элементом в новом списке. Он не может изменить длину списка. В вашей функции вы не говорите ему, как сопоставить элементы, которые не удовлетворяют предикатам, поэтому JS сопоставляет их с undefined

Катаморфизм, такой как фильтр, с другой стороны, может сделать это.

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