Мне нужно объединить два объекта в Angular и Firestore

Question

Мне нужно объединить два списка объектов в один.Первый список - это фильмы, которые я создал.Второй список из фильмов, которые поделились мной.Я хочу объединить эти два списка так, чтобы они смешивались и упорядочивались в алфавитном порядке, поскольку сейчас они разделены.

(3) [{…}, {…}, {…}]
0: {compartir_con: "", descripcion: "", id: "", link_descarga: "", portada: "", …}
1: {compartir_con: "", descripcion: "", id: "", link_descarga: "", portada: "", …}
2: {compartir_con: "", descripcion: "", id: "", link_descarga: "", portada: "", …}
length: 3
__proto__: Array(0)
list-films.component.ts:68

[{…}]
0: {compartir_con: "", descripcion: "", id: "", link_descarga: "", portada: "", …}
length: 1
__proto__: Array(0)

InHTML для моих фильмов:

<div *ngFor="let film of (films | orderBy: ['+vista','+titulo'] ) | grdFilter: {titulo: searchText, descripcion: searchText};">

В HTML для общих фильмов:

<div *ngFor="let film of (shared | orderBy: ['+vista','+titulo'] ) | grdFilter: {titulo: searchText, descripcion: searchText};">

Это мои данные-api.service.ts

getAllYourFilms(id) {
  this.filmsCollection = this.afs.collection('films', ref => 
    ref.where('userUid', '==', id));
    return this.films = this.filmsCollection.snapshotChanges()
      .pipe(map(changes => {
        return changes.map(action => {
          const data = action.payload.doc.data() as FilmInterface;
          data.id = action.payload.doc.id;
          return data;
        });
      }));
  }
getAllFilmsSharedWithYou(email) {
  this.filmsCollection = this.afs.collection('films', ref => 
    ref.where('compartir_con', '==', email));
    return this.films = this.filmsCollection.snapshotChanges()
      .pipe(map(changes => {
        return changes.map(action => {
          const data = action.payload.doc.data() as FilmInterface;
          data.id = action.payload.doc.id;
          return data;
      });
  }));
}

Мой список-films.component.ts

getListFilms(iduser) {
    this.dataApi.getAllYourFilms(iduser)
      .subscribe(films => {
        this.films = films;
        console.log(films);
     });
  }

  getListFilmsShared(email) {
      this.dataApi.getAllFilmsSharedWithYou(email)
          .subscribe(films => {
            this.shared = films;
        console.log(films);
          });
  }

Мне нужны все фильмы в одном массиве.

[0]{…}
[1]{…}
[2]{…}
[3]{…}

Но на самом деле это:

Мои фильмы

[0]{…}
[1]{…}
[2]{…}

Поделились со мной

[0]{…}

Раствор

Я редактирую эту функцию (list-films.component.ts):

getListFilmsShared(email) {
   this.dataApi.getAllFilmsSharedWithYou(email)
     .subscribe(films => {
        this.films = this.films.concat(films);
     });
}