角度材料 md-list 更新后不刷新答案

【问题标题】：angular material md-list not refreshing after update角度材料 md-list 更新后不刷新
【发布时间】：2016-12-13 18:14:45
【问题描述】：

我这样实现了一个 md-list：

<md-list>
    <md-list-item class="md-3-line" ng-repeat="file in index.files | orderBy:'type'" ondrop="drop(event)" ondragover="allowDrop(event)" ng-click="$parent.getContent(file, $event)">
        <img ng-src="{{file.face}}" class="md-avatar" alt="{{file.name}}">
        <div class="md-list-item-text" layout="column">
            <h3>{{ file.name }}</h3>
            <h4 ng-if="file.size > 0">{{ file.size }}</h4>
            <p>{{ file.mime }}</p>
        </div>
        <div class="md-list-item-text" layout="column" style="max-width: 300px;">
            <p>{{ file.lastmod }}</p>
        </div>
    </md-list-item>
</md-list>

如您所见，列表将遍历一个名为 files 的容器。它在一开始就在我的索引控制器中定义：

this.files = directoryService.getContent();

被调用的服务“directoryService”提供目录的内容，实现如下：

  app.factory('directoryService', function() {
    var content = [];

    return {
        path,
        getContent: function() {
            console.log("returning directory content");
            return content;
        },

        updateList: function(incfiles) {
            console.log("refreshing directory content");
            content.length = 0;
            Array.prototype.push.apply(content, incfiles);
        }
    };
});

连接到 webdav 服务器后，列表显示根目录中的所有文件，运行良好。单击列表中的目录后，方法 (getContent) 再次调用服务器（http 调用）以获取单击目录的内容：

   $scope.getContent = (file, ev) => {
        console.log(file);
        if (file.type == "directory") {
            listDirectoryContent(currentPath + file.name);
        }
    };

方法 listDirectoryContent() 将调用服务器并更新与 md-list 连接的 directoryService.files 对象：

 listDirectoryContent = (path) => {
        var lclfiles = [];

        var imagePathFolder = 'public/img/folder.svg';
        var imagePathFile = 'public/img/file.svg';
        var imagePathUp = 'public/img/back.svg';

        clientService.client
            .getDirectoryContents(path)
            .then(function(contents) {
                //Set default folders.
                lclfiles.push({
                    ...
                });
                contents.forEach(function(element) {
                    if (element.type == "file") {
                        lclfiles.push({
                            ...
                        });
                    } else {
                        lclfiles.push({
                            ...
                        });
                    }
                }, this);
                directoryService.updateList(lclfiles);
            })
            .catch(function(err) {
                alert(err);
                console.error(err);
            });
    }

});

所以基本上发生的情况是，我使用 .then() 等到 http 调用完成。之后，我通过调用 directoryService.updateList(newfiles) 将新内容放入 directoryService.files 数组中。

接下来发生的事情是，md-list 没有更新其内容，直到我单击随机文件...单击文件后，列表正确显示 .files 的内容...似乎 UI/列表刷新太晚了……我错过了什么吗？

谢谢大家。

【问题讨论】：

currentPath 设置在哪里？
有一个处理路径的进程。我没有在这里粘贴它，因为它与问题无关。但是我测试了一下，路径总是有效的！

标签： javascript angularjs html angular-material

【解决方案1】：

我很幸运，遇到了同样有这个问题的人。我不知道这是不是一个好方法！但它对我有用。在我的 directoryService 中，我用以下语句包围了更新方法内容：

updateList: function(incfiles) {
            console.log("refreshing directory content");
            $q.when(true).then(() => {
                content.length = 0;
                Array.prototype.push.apply(content, incfiles);
                console.log(content);
            });

        }

该列表正在运行。单击目录后，新内容会在 http 调用完成后立即显示。

我希望这对某人有所帮助。

干杯

【讨论】：