Отображение предупреждения загрузки с помощью angular2

118
11

Я хочу отобразить предупреждение 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)

спросил(а) 2021-01-19T19:35:11+03:00 6 месяцев назад
1
Решение
100

Вчера вечером я не видел этого, наверное, слишком поздно. Но ваша проблема заключается не в контексте 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;
}
});
}
}

ответил(а) 2021-01-19T19:35:11+03:00 6 месяцев назад
63

Рассмотрим этот компонент динамического предупреждения:


Angular2 Сервис, который создает, показывает и управляет внутренним компонентом? Как реализовать js alert()?


например:
.

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

Смотрите здесь демо-версию

ответил(а) 2021-01-19T19:35:11+03:00 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема