角2如何被填充阵列后运行一个函数

Question

组件：

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 

import { AF } from '../angularfire.service'; 

@Component({ 
    selector: 'app-add-friend', 
    templateUrl: './add-friend.component.html', 
    styleUrls: ['./add-friend.component.less'] 
}) 
export class AddFriendComponent implements OnInit { 
    profileInfo = []; 
    currentUser = []; 
    requestToggle: boolean = false; 
    showButtons: boolean = true; 

    constructor(private afService: AF, private route: ActivatedRoute, private router: Router) { 
    let id = this.route.snapshot.params['id']; 

    // Get viewed profile details. 
    this.afService.getAthleteProfile(id).subscribe((data) => { 
     if (data.length > 0) { 
     let details = data[0]; 
     this.profileInfo.push(details); 
     } 
    }); 

    // Get current logged in user details. 
    afService.getCurrentUserInfo().then(currentUserDetails => { 
     this.currentUser.push(currentUserDetails); 
    }); 
    } 

    // Send friend request. 
    addFriend() { 
    this.afService.addFriendRequest(this.profileInfo[0].userID, this.currentUser[0].userID, this.profileInfo[0].firstName, this.profileInfo[0].lastName, this.currentUser[0].firstName, this.currentUser[0].lastName).then(() => { 

    }); 
    } 

    ngOnInit() { 
    // Check if friend request has been sent to display appropriate button. 
    setTimeout (() => { 
    if (this.currentUser) { 
     this.afService.getFriendRequests(this.profileInfo[0].userID, this.currentUser[0].userID).subscribe((data) => { 
     if (data.length > 0) { 
      this.requestToggle = true; 
     } 
     }); 
     this.afService.getFriendRequestsFrom(this.profileInfo[0].userID, this.currentUser[0].userID) 
     .subscribe(data => { 
     if (data.length > 0) { 
      this.requestToggle = true; 
     } 
     }); 
    } 

    // Hides buttons if on own profile. 
    if (this.profileInfo[0].userID == this.currentUser[0].userID) { 
     this.showButtons = false; 
    } else { 
     this.showButtons = true; 
    } 
    }, 1000); 
    } 

} 

服务：

import { Injectable } from "@angular/core"; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import "rxjs/add/operator/map"; 

@Injectable() 
export class AF { 
    public currentUserDetails; 

    constructor(public af: AngularFireAuth, private database: AngularFireDatabase, private router: Router) { 
    } 

// Get all currently logged in user details. 
getCurrentUserInfo() { 
    return new Promise((resolve, reject) => { 
    this.af.authState.subscribe(authData => { 
     let email = authData.email; 
     let array = this.database.list('registeredUsers', { 
     query: { 
     orderByChild: 'email', 
     equalTo: email 
     } 
    }).subscribe(data => { 
     let currentUserDetails = data[0]; 
     resolve(currentUserDetails); 
     }); 
    }); 
    }); 
} 

// Get all users details. 
getAllAthletes(): Observable<any> { 
    return this.database.list('registeredUsers'); 
} 

// Get useer details for the current profile route. 
getAthleteProfile(userID) { 
    return this.database.list('registeredUsers', { 
    query: { 
     orderByKey: userID, 
     equalTo: userID 
    } 
    }) 
} 

// Register new user. 
registerUser(email, password) { 
    return this.af.auth.createUserWithEmailAndPassword(email, password); 
} 

// Add new user details to database. 
addUserEntry(uid, fname, lname, email) { 
    return this.database.object('registeredUsers/' + uid).set({ 
    firstName: fname, 
    lastName: lname, 
    email: email, 
    userID: uid, 
    bio: "Your short bio goes here...", 
    phone: 5555555555 
    }); 
} 

// Add friend request to both parties. 
addFriendRequest(profileUID, currentUID, profileFirstName, profileLastName, currentFirstName, currentLastName) { 
    return this.database.object('registeredUsers/' + currentUID + '/friends/requests/requestTo/' + profileUID).set({ 
    requestTo: profileUID, 
    firstName: profileFirstName, 
    lastName: profileLastName 
    }).then(() => 
    this.database.object('registeredUsers/' + profileUID + '/friends/requests/requestFrom/' + currentUID).set({ 
    requestFrom: currentUID, 
    firstName: currentFirstName, 
    lastName: currentLastName 
    }) 
)} 

/* (TODO): Consolidate lines 81-99. Replace the paths with variables set in the components. 
---* 
---*/ 

// Check if user sent a friend request to user being viewed. 
getFriendRequests(profileUID, currentUID) { 
    return this.database.list('registeredUsers/' + currentUID + '/friends/requests/requestTo/' + profileUID) 
} 

// Check if user received a friend request from user being viewed. 
getFriendRequestsFrom(profileUID, currentUID) { 
    return this.database.list('registeredUsers/' + currentUID + '/friends/requests/requestFrom/' + profileUID) 
} 

// Get all sent friend requests. 
getPendingFriendRequests(currentUID) { 
    return this.database.list('registeredUsers/' + currentUID + '/friends/requests/requestTo/'); 
} 

// Get all received friend requests. 
getPendingFriendRequestsFrom(currentUID) { 
    return this.database.list('registeredUsers/' + currentUID + '/friends/requests/requestFrom/'); 
} 

// Update the user account info. 
updateUserEntry(uid, fname, lname, phone, bio) { 
    return this.database.object('registeredUsers/' + uid).update({ 
    firstName: fname, 
    lastName: lname, 
    phone: phone, 
    bio: bio 
    }); 
} 

// Login 
loginWithEmail(email, password) { 
    return this.af.auth.signInWithEmailAndPassword(email, password).then(()=> { 
    this.router.navigate(['/dashboard']); 
    }).catch(function(error) { 
    var errorMessage = error.message; 
    }) 
} 

// Logout 
logout() { 
    this.af.auth.signOut().then(() => 
    this.router.navigate(['/login']) 
)} 
} 

往末端，我有包裹在1秒setTimeout函数，因为该阵列的功能需要填入currentUser才能正常运行。该数组总是被填充，但速度不够快，所以如果没有setTimeout，该函数将不会运行。

而不是使用setTimeout，有没有什么办法告诉Angular “在这个阵列填充后运行这个函数”？

Answer 1

首先，不需要在服务Promise，你可以简单地返回可观察：

import 'rxjs/add/operator/mergeMap'; 



getCurrentUserInfo() { 
    return this.af.authState.mergeMap(authData => { 
     return this.database.list('registeredUsers', { 
      query: { 
       orderByChild: 'email', 
       equalTo: authData.email 
      } 
     }); 
    }).map(data => { 
     let currentUserDetails = data[0]; 
     resolve(currentUserDetails); 
    }); 
} 

Note: If you don't know how observables work, you should take a look at some tutorials.

之后，你可以在你的组件使用。我们知道，我们需要currentUser和profileInfo bevor我们可以执行你的功能。这意味着，这两个观测需要进行compleated：

import 'rxjs/add/observable/forkJoin'; 

Observable.forkJoin(
    this.afService.getAthleteProfile(id), 
    this.afService.getCurrentUserInfo() 
).subscribe((results) => { 
    results[0]; //This is the result of getAthleteProfile 
    results[1]; //This is the result of getCurrentUserInfo 

    //Now, push the values into the arrays 
    yourFunction(); //and execute your function here 
}); 

注意：不要忘了导入可观察运营商：

import 'rxjs/add/observable/forkJoin'; 
import 'rxjs/add/operator/mergeMap';