web-dev-qa-db-fra.com

Affichage de l'alerte d'amorçage à l'aide d'angular2

Je souhaite afficher une alerte Bootstrap lorsque l'utilisateur a enregistré les données.

mon code est comme ci-dessous:

page html:

<div class="alert alert-success" *ngIf="saveSuccess">
    <strong>Success!</strong>
</div>
<form #f="ngForm" (submit)="saveUser(f.value)">
        /////Some form fields
    <button class="form-control btn btn-primary" type="submit">save</button>
</form>

app.component.ts:

export class UserProfileComponent{
 saveSuccess: boolean;
 user: IUser;

saveUser(user:IUser) {
    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.editUserForm = user;
    this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
        headers: this.headers
    }).subscribe(function(data) {

        // if the update is successful then set the value to true
        // this is getting updated
        if (data){
            this.saveSuccess = true;
        }
        else{
            this.saveSuccess = false;
        }
    });
}

}

Je souhaite afficher l'alerte lorsqu'un POST réussi est terminé.

Je pense que je ne vois pas comment lier la variable 'saveSuccess' à html afin que l'alerte puisse être affichée lorsque la sauvegarde est terminée. (Je suis nouveau sur Angular2)

javascripttwitter-bootstrapangular
7
Pradeepb

Hier soir, je ne l'ai pas vu, il était probablement trop tard. Mais votre problème est de ne pas avoir le contexte this dans la fonction en ligne où vous définissez saveSuccess.

Je suggérerais que vous utilisiez lambdas ou "fonction de flèche grasse". Au lieu de

function(data) { ... }

tu fais

(data) => { ... }

De cette façon, le contexte this sera préservé. Il suffit de l’utiliser partout où vous avez besoin d’une fonction intégrée et vous n’aurez plus de problèmes! :)

Votre code avec la fonction lambda:

export class UserProfileComponent{
    saveSuccess: boolean;
    user: IUser;

    saveUser(user:IUser) {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.editUserForm = user;
        this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
            headers: this.headers
        })
        .map((data: Response) => data.json) // <-- also add this to convert the json to an object
        .subscribe((data) => { // <-- here use the lambda

            // if the update is successful then set the value to true
            // this is getting updated
            if (data){
                this.saveSuccess = true;
            }
            else{
                this.saveSuccess = false;
            }
        });
    }
}
5
rinukkusu

Considérez ce composant d'alerte dynamique:

Angular2 Service qui crée, affiche et gère son composant interne? Comment implémenter js alert ()?

par exemple:.

this.alertCtmService.alertOK("Save changes???").subscribe(function (resp) {
    console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
    this.saveData();
}.bind(this) );

Voir cette démo ici

1
Dudi