Невозможно отобразить данные объединенной таблицы в моем представлении Angaular 6 с таблицей данных материала

Question

Мне нужна твоя помощь по поводу угловых с огненной базой.Я хочу получить записи из 2 узлов, что-то вроде соединения.

Узлы похожи на это -

1- пользователи {ключ, имя пользователя, usertype_key}

2- user_types {ключ (который существует в таблице пользователей с именем "usertype_key"), user_type}

Мне нужно объединить обе таблицы и получить такие записи {users.key, users.username, user_types.user_type}

Я написал такой код -

// Код моего пользовательского сервиса user.service.ts

        getUsersList() {
            const ref = firebase.database().ref();
            const userRef = ref.child('/users');
            const utypeRef = ref.child('/user_types');
            const resp = [];
            userRef.on('child_added', snapnotes => {
            utypeRef.child(snapnotes.val().user_type).once('value', subsnap => {
        resp.push({
        'key': snapnotes.key,
        'username': snapnotes.val().username,
        'user_type': subsnap.val().user_type
        });
    });
});
return resp;

}

// Мой код компонента пользователя похож на этот user.component.ts

         constructor(private userService: UserService,
           private authService: AuthService,
           private matDialog: MatDialog) {
         }

        async ngOnInit() {
         this.userSubscribe = await this.authService.user$.subscribe(user => this.userId = user.uid);
         // here I am getting users list
         this.items =  new MatTableDataSource(this.userService.getUsersList());
         }

мои проблемы

1 - как преобразовать datasnapshot в наблюдаемый, чтобы я мог подписать его на свой код компонента

2 - не удалось инициализировать таблицу данных материала.

Есть ли другой способ сделать это, не влияя на скорость оптимизации.

Спасибо и всего наилучшего Раджану Бхадаурии