Wyświetlanie alertu ładowania początkowego za pomocą metody angleular2

Question

Chcę wyświetlić alert Bootstrap, gdy użytkownik zapisał dane.

mojego kodu jest jak poniżej:

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

}

chcę wyświetlić alert gdy zakończono pomyślnie test POST.

Myślę, że brakuje mi powiązania zmiennej "saveSuccess" z html, dzięki czemu można wyświetlić alert po pomyślnym zapisaniu. (Jestem nowy w Angular2)

Answer 1

Ostatniej nocy tego nie widziałem, było prawdopodobnie za późno. Ale twój problem nie jest związany z kontekstem funkcji wstawiania, w którym ustawiono saveSuccess.

Proponuję użyć lambdas lub "funkcji grubej strzałki". Zamiast

function(data) { ... } 

zrobić

(data) => { ... } 

ten sposób kontekst this zostaną zachowane. Po prostu używaj go wszędzie tam, gdzie potrzebujesz funkcji inline i już nie będziesz miał problemów! :)

---

Kod z funkcją 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

Rozważmy ten dynamiczny składnik powiadomienie:

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

na przykład: .

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

See this Demo here