Visualizzazione dell'avviso di bootstrap utilizzando angular2

Question

Desidero visualizzare l'avviso Bootstrap quando l'utente ha salvato i dati.

il mio codice è il seguente:

pagina 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; 
     } 
    }); 
} 

}

voglio visualizzare l'avviso quando un il POST ha successo.

Penso che mi manca come associare la variabile 'saveSuccess' in html in modo che possa essere visualizzato un avviso quando il salvataggio ha avuto successo. (Sono nuovo di Angular2)

Answer 1

Ieri sera non l'ho visto, probabilmente era troppo tardi. Ma il tuo problema non è il contesto this nella funzione inline dove hai impostato saveSuccess.

Ti suggerisco di utilizzare lambda o "funzione freccia grossa". Invece di

function(data) { ... } 

fate

(data) => { ... } 

In questo modo il contesto this sarà conservata. Usalo ovunque ti serva la funzione inline e non avrai più problemi! :)

---

il codice con la funzione 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; 
      } 
     }); 
    } 
} 

Answer 2

considerare questo componente avviso dinamica:

Angular2 Service which create, show and manage it's inner Component? How to implement js alert()?

per esempio: .

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

See this Demo here