Question

我得到一个项目列表并用它来动态创建一个HTML列表

_loadList(){
    HttpUtils.get('http://myserver/list/users/')
    .then((res) => {
        const self = this;
        res.forEach((item) => {
            userListContainer.append('<li> item.name </li>')
        });
    });
}

我在构造函数中调用此函数，一切正常

constructor() {
    this._loadList();
}

我试图每隔5秒调用一次这个函数来用新结果更新列表：

constructor() {
    const that = this;
    this._loadList();
    window.setInterval(function(){
        that._loadList();
    }, 5000);
}

调用该函数，接收的结果包含新内容，但不更新HTML。你对这个问题有所了解吗？

Answer 1

您可以尝试下面适用于您的代码。您可以查看https://es6console.com/jgyxgm1f/示例，该示例将提醒随机数（在您的情况下，它相当于添加来自API响应的新数据）。

_loadList = () => {
   HttpUtils.get('http://myserver/list/users/')
     .then((res) => {
       userListContainer.empty();
       res.forEach((item) => {
          userListContainer.append('<li> item.name </li>')
       });
   });
 }

constructor = () => {
    this._loadList();
    window.setInterval(() => {
        this._loadList();
    }, 5000);
}

使用javascript重新加载HTML元素无效

1 个答案: