如何在 Angular5 中更新 Html 组件上的列表
How to Update List On Html Component in Angular5
我有一个名为 "Alarms" 的组件,我在其中调用 this.getNotifications();
函数来获取所有通知并将这些通知绑定为模板上的列表。有一个选项可以清除每个警报。我正在调用 clearGatewayError()
函数来更新警报,因此应该在更新警报后更新列表。但是列表没有在模板上更新。
这是我的alarms.Component.ts
getNotifications() {
this.appService.fetchAllErrors().then((resp: any) => {
if (resp.success) {
this.notifications = resp.data;
console.log(this.notifications)
this.notifications.gatewayErrors.map(item => {
if (item.type == 'error') {
let tempGateway = this.getGatewayDetails(item.gatewaycode);
item.getewayName = tempGateway.name;
item.time = moment(item.time).fromNow();
this.errors.push(item);
}
else if (item.type == 'warning') {
let tempGateway = this.getGatewayDetails(item.gatewaycode);
item.getewayName = tempGateway.name;
item.time = moment(item.time).fromNow();
this.warnings.push(item);
}
else if (item.type == 'info') {
let tempGateway = this.getGatewayDetails(item.gatewaycode);
item.getewayName = tempGateway.name;
item.time = moment(item.time).fromNow();
this.info.push(item);
}
})
}
})
.catch((err) => {
console.log(err);
})
}
clearGatewayError(id) {
this.appService.updateGatewayError(id).then((resp: any) => {
console.log(resp)
if (resp.success) {
console.log(resp);
this.getNotifications();
}
else {
console.log(resp);
}
})
}
这是我的component.html代码
<li *ngFor="let error of errors">
<div class="card list-view-media">
<div class="card-block" style="border: 1px solid red">
<div class="media" style="margin-top: 20px">
<div class="media-body">
<div class="col-xs-12">
<h6 class="d-inline-block">{{error?.getewayName}}</h6>
</div>
<p>{{error?.description}}</p>
<div class="m-t-15">
<span style="font-size: 12px">{{error?.time}}</span>
</div>
</div>
</div>
<button class="btn btn-primary" style="float: right;" (click)="clearGatewayError(error._id)">Clear</button>
</div>
</div>
</li>
首先,您应该清空数组,然后再开始向其上推送项目,否则您会得到重复项。你有更多关于你的问题的背景吗?就像 resp.success
是真的, gatewayErrors
在你调用 clearGatewayError
之前和之后是什么?
我有一个名为 "Alarms" 的组件,我在其中调用 this.getNotifications();
函数来获取所有通知并将这些通知绑定为模板上的列表。有一个选项可以清除每个警报。我正在调用 clearGatewayError()
函数来更新警报,因此应该在更新警报后更新列表。但是列表没有在模板上更新。
这是我的alarms.Component.ts
getNotifications() {
this.appService.fetchAllErrors().then((resp: any) => {
if (resp.success) {
this.notifications = resp.data;
console.log(this.notifications)
this.notifications.gatewayErrors.map(item => {
if (item.type == 'error') {
let tempGateway = this.getGatewayDetails(item.gatewaycode);
item.getewayName = tempGateway.name;
item.time = moment(item.time).fromNow();
this.errors.push(item);
}
else if (item.type == 'warning') {
let tempGateway = this.getGatewayDetails(item.gatewaycode);
item.getewayName = tempGateway.name;
item.time = moment(item.time).fromNow();
this.warnings.push(item);
}
else if (item.type == 'info') {
let tempGateway = this.getGatewayDetails(item.gatewaycode);
item.getewayName = tempGateway.name;
item.time = moment(item.time).fromNow();
this.info.push(item);
}
})
}
})
.catch((err) => {
console.log(err);
})
}
clearGatewayError(id) {
this.appService.updateGatewayError(id).then((resp: any) => {
console.log(resp)
if (resp.success) {
console.log(resp);
this.getNotifications();
}
else {
console.log(resp);
}
})
}
这是我的component.html代码
<li *ngFor="let error of errors">
<div class="card list-view-media">
<div class="card-block" style="border: 1px solid red">
<div class="media" style="margin-top: 20px">
<div class="media-body">
<div class="col-xs-12">
<h6 class="d-inline-block">{{error?.getewayName}}</h6>
</div>
<p>{{error?.description}}</p>
<div class="m-t-15">
<span style="font-size: 12px">{{error?.time}}</span>
</div>
</div>
</div>
<button class="btn btn-primary" style="float: right;" (click)="clearGatewayError(error._id)">Clear</button>
</div>
</div>
</li>
首先,您应该清空数组,然后再开始向其上推送项目,否则您会得到重复项。你有更多关于你的问题的背景吗?就像 resp.success
是真的, gatewayErrors
在你调用 clearGatewayError
之前和之后是什么?