在代码完成 PUT 方法后调用 GET 方法

Question

我有一个应用程序可以从数据库中检索用户信息。他们通过模式对话框添加用户，一旦他们点击提交，这将创建一个新用户，我试图弄清楚如何立即显示这个新用户而无需进行硬重新加载。 onSubmit() 方法创建一个新用户，并且在其中我有 - this.manageUsersComponent.testGet() - 它通过检索用户信息的 get 调用调用该方法。此行在创建用户完成之前被调用，因此数据不会立即更新。

    public createNewUser(withLogin : boolean, validNewUser : NewUser) : Observable<any> {

        let tokenObservable : Observable<string> = withLogin ?
            this.tokenService.login() :
            new Observable(observer => {
                observer.next('');
                observer.complete();
            });

        return tokenObservable.flatMap(token => {
            if (token.length === 0) {
                token = localStorage.getItem('PlatformApiService.token');
            }

            return this.http.post<HttpResponse<any>>(URM_ENDPOINT, this.dummyNewUserRequest, {
                headers: new HttpHeaders({
                    'Authorization': 'Bearer ' + token,
                }),
                observe: 'response'});
        });
    }

    public getUsers(withLogin : boolean) : Observable<HttpResponse<any>> {
        let tokenObservable : Observable<string> = withLogin ?
            this.tokenService.login() :
            new Observable(observer => {
                observer.next('');
                observer.complete();
            });

        return tokenObservable.flatMap(token => {
            if (token.length === 0) {
                token = localStorage.getItem('PlatformApiService.token');
            }

            return this.http.get<HttpResponse<any>>(URM_ENDPOINT, {
                headers: new HttpHeaders({
                    'Authorization': 'Bearer ' + token,
                }),
                observe: 'response'});
        });
    }

    onSubmit() : void {
        this.formSubmitted = true;

        if (this.addUserForm.valid) {
            let withLogin : boolean = true;
            let unauthorized : number = 401;

            this.createValidUser();

            /**
             * Call the code to Create a new user
             */
            this.addUserService.createNewUser(!withLogin, this.validNewUser)
            .catch(error => {
                if (error.status === unauthorized) {
                    return this.addUserService.createNewUser(withLogin, this.validNewUser);
                }})
                .subscribe(
                    response => console.log(response),
                    error => console.log(error));

            this.manageUsersComponent.testGet();

            this.toggleModalDisplay();
            this.addUserForm.reset();

        } else {
            this.userValidator.validate(this.addUserForm, this.formSubmitted);
        }

    }

    public testGet() : void {
        // Fill the grid with data
        let withLogin : boolean = true;
        let unauthorized : number = 401;

        this.manageUsersService.getUsers(! withLogin)
            .catch(error => {
                if (error.status === unauthorized) {
                    return this.manageUsersService.getUsers(withLogin);
                }})
            .subscribe(
                response => this.fillTable(this.gridConfig, response.body),
                error => console.log(error));
    }

Answer 1

我更新了 onSubmit 方法，因此响应调用 this.manageUsersComponent.testGet()

    onSubmit() : void {
        this.formSubmitted = true;

        if (this.addUserForm.valid) {
            let withLogin : boolean = true;
            let unauthorized : number = 401;

            this.createValidUser();

            /**
             * Call the code to Create a new user
             */
            this.addUserService.createNewUser(!withLogin, this.validNewUser)
            .catch(error => {


                if (error.status === unauthorized) {
                    return this.addUserService.createNewUser(withLogin, this.validNewUser);
                }})
                .subscribe(
                    response => this.manageUsersComponent.testGet(),
                    error => console.log(error));


            this.toggleModalDisplay();
            this.addUserForm.reset();

        } else {
            this.userValidator.validate(this.addUserForm, this.formSubmitted);
        }

    }

在代码完成 PUT 方法后调用 GET 方法

Call GET method after code has completed a PUT method

typescript

angular2-routing