迭代Angular Firestore Collection以检索每个id的数据

Question

我使用angularfire2从云firestore集合中获取数据，然后使用公共id迭代相同的数据以从另一个集合中获取详细信息但是在执行此操作时，我无法以我想要的方式显示html中的响应。我想因为迭代，它每次都显示最后一个值而不是整个对象。

component.ts

export class ChatComponent implements OnInit {
    id_token: string;
    userChatRoom: Observable<any[]>;
    userData: Observable<any[]>;
    finalData: string[] = [];

    this.id_token = localStorage.getItem('id_token');
    this.userChatRoom = db.collection('chatRooms', ref => ref.where('userId','==',this.id_token)).valueChanges();
    this.userChatRoom.subscribe(data => {
        this.finalData = [];
        for (let each of data){
            console.log(each);
            this.userData = db.collection('users', ref => ref.where('id','==',each['otherUserId'])).valueChanges();
            this.userData.subscribe(response =>{ 
                for (let detail of response){
                    this.finalData.push(detail);
                }
            });
        }
        console.log(this.finalData);
    });
}

component.html

<a class="list-group-item" *ngFor="let user of userData | async" (click)="openChatWindow($event)">
    <div class="media-box" #chatWindowOpen>
        <div class="pull-left">
            <img class="media-box-object img-circle thumb32" src={{user.profileImageUrl}} alt="Image" />
        </div>
        <div class="media-box-body clearfix">
            <strong class="media-box-heading text-primary" id={{user.id}}>
              {{user.first_name}}
              {{user.last_name}}
            </strong>
        </div>
    </div>
</a>

我想要显示的输出：

现在显示输出：

我想显示此列表中的所有用户。我尝试使用'推送'方法，但我想我使用它错了。