web-dev-qa-db-ja.com

表示bootstrap 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を初めて使用します）

javascripttwitter-bootstrapangular
7
Pradeepb

昨夜私はそれを見ませんでした、それはおそらく手遅れでした。ただし、問題は、thisを設定するインライン関数にsaveSuccessコンテキストがないことです。

ラムダまたは「ファットアロー関数」を使用することをお勧めします。の代わりに

function(data) { ... }

あなたがやる

(data) => { ... }

このようにして、thisコンテキストが保持されます。インライン関数が必要な場所で使用するだけで、もう問題はありません。 :)

ラムダ関数を使用したコード：

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

この動的アラートコンポーネントについて考えてみます。

内部コンポーネントを作成、表示、管理するAngular2サービス？js alert（）の実装方法？

例えば： 。

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

ここでこのデモを参照してください

1
Dudi