twitter-bootstrap 使用 angular2 显示引导程序警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37901365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying bootstrap alert using angular2
提问by Pradeepb
I want to display Bootstrap alert when the user has saved the data.
我想在用户保存数据时显示 Bootstrap 警报。
my code is as below:
我的代码如下：
html 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:
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;
}
});
}
}
}
I want to display the alert when a successful POST is done.
我想在成功完成 POST 后显示警报。
I think i am missing how to bind the 'saveSuccess' variable to html so that alert can be displayed when the successful save is done. (I am new to Angular2)
我想我缺少如何将 'saveSuccess' 变量绑定到 html 以便在成功保存完成时显示警报。（我是 Angular2 的新手）
采纳答案by rinukkusu
Last night I didn't see it, it was probably too late. But your problem is not having the thiscontext in the inline function where you set saveSuccess.
昨晚没看到，估计晚了。但是您的问题是this在您设置的内联函数中没有上下文saveSuccess。
I'd suggest you use lambdas or "fat arrow function". Instead of
我建议您使用 lambdas 或“胖箭头函数”。代替
function(data) { ... }
you do
你做
(data) => { ... }
This way the thiscontext will be preserved. Just use it wherever you need inline function and you will have no problems anymore! :)
这样，this上下文将被保留。只需在需要内联函数的任何地方使用它，您就不会再有任何问题！:)
Your code with the lambda function:
您使用 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;
}
});
}
}
回答by Dudi
Consider this dynamic alert component:
考虑这个动态警报组件：
Angular2 Service which create, show and manage it's inner Component? How to implement js alert()?
创建、显示和管理它的内部组件的 Angular2 服务？如何实现js alert()？
for example: .
例如： 。
this.alertCtmService.alertOK("Save changes???").subscribe(function (resp) {
console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
this.saveData();
}.bind(this) );
