Question

我在基于Web API（基本上是列表）结果填充的组件中有一个div。我有一个提交按钮，可通过Web API调用在列表中添加一个新元素。一旦我点击了提交按钮，元素就会被添加到数据库的列表中，但是它不会显示在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" }
              });

在弹出窗口中单击“确定”时，我希望刷新显示ID列表的div，以便可以看到新添加的数据。

您能帮助我实现这一目标吗？

Answer 1

保存后，您将从服务中获得新添加的对象，因此，保存成功后，您只需将新记录推送到IdList，就可以在其中调用成功弹出窗口，如下所示：

this.IdList.push(res)

这应该更新组件。

Answer 2

我有相同的要求，我使用ChangeDetectionStrategy.OnPush。数据更新时，这将自动刷新模板。您可以阅读有关here

的信息

如何单独在组件angular 4

2 个答案: