使用angular2顯示引導警報

Question

我想在用戶保存數據時顯示引導警報。

我的代碼如下：

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

}

我想要顯示的警報時，成功的POST完成。

我想我錯過了如何將'saveSuccess'變量綁定到html，以便在成功保存完成後顯示警報。 （我是Angular2的新手）

Answer 1

昨晚我沒看到它，可能已經太晚了。但是，您的問題是在設置saveSuccess的內聯函數中沒有this上下文。

我建議你使用lambdas或「胖箭頭功能」。取而代之的

function(data) { ... } 

你做

(data) => { ... } 

這樣的背景下this將被保留。只要在需要內聯功能的地方使用它，您就不會再有問題了！ :)

---

你的代碼的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

考慮這個充滿活力的報警組件：

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

例如： 。

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

See this Demo here