如何在组件内部单独刷新div angular 4

Question

我在一个组件中有一个div，它是根据Web API的结果填充的(基本上是一个列表(。我有一个提交按钮，它通过Web API调用在列表中添加一个新元素。一旦我点击submit按钮，元素就会被添加到DB的列表中，但它不会显示在div中。我必须每次刷新页面才能获得数据。

一旦我点击提交按钮，是否可以动态刷新div。

在我的html中，我有

<div class="col-sm-3 pdl0 pr15" *ngFor="let item of IdList;let i=index;">
<a class="prevbtn" id="preview_{{i}}" (click)="Open(i)">{{item.Id}}</a>
</div>

在我在ngInit上的ts文件中，我从以下列表中的Web API调用中获取值：

this.Service.GetRecords(this.EmpNum)
.catch(this.handleError)
.subscribe((res) => {
this.Service.IdList= res;
},
error => {
console.log(error)
});

点击提交按钮，通过web api调用在数据库中添加一个新的Id，并在列表中更新，打开一个成功弹出窗口，如下所示：

let dialogRef = this.dialog.open(Alert, {
width: '30%',
data: { alertMessage: "Id" + res.Id+ " has been created" }
});

点击弹出窗口中的OK，我希望显示Id列表的div被刷新，以便新添加的数据可见。

你能帮我实现这一点吗。

Answer 1

当您在保存后从服务中获得新添加的响应对象时，您可以在成功保存后将新记录推送到IdList，在那里您调用成功弹出窗口，如下所示：

this.IdList.push(res)

这应该会更新组件。

Answer 2

我有同样的要求，我使用ChangeDetectionStrategy.OnPush。这将在数据更新时自动刷新模板。你可以在这里阅读