javascript – 使用angular2显示引导程序警报

我想在用户保存数据时显示Bootstrap警报.

我的代码如下:

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的新手)

解决方法

昨晚我没有看到它,可能为时已晚.但是您的问题是在设置saveSuccess的内联函数中没有此上下文.

我建议你使用lambdas或“胖箭头功能”.代替

function(data) { ... }

你做

(data) => { ... }

这样就可以保留这个上下文.只需在需要内联功能的地方使用它,您将不再有任何问题!

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...