Отображение предупреждения загрузки с помощью 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)
Вчера вечером я не видел этого, наверное, слишком поздно. Но ваша проблема заключается не в контексте 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;
}
});
}
}
Рассмотрим этот компонент динамического предупреждения:
например:
.
this.alertCtmService.alertOK("Save changes???").subscribe(function (resp) {
console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
this.saveData();
}.bind(this) );
