0

因此，我正在为自己的个人投资组合工作，其中包括我为网络开发入门课程所做的一些项目。由于我们一直在课堂上练习数据驱动的内容网站和 web 应用程序，我的教授希望我们做类似的事情，将我们的数据放在基于云的数据存储或 .csv 文件中。我决定走 .csv 文件路线。

创建 .csv 文件后，我使用 Papa Parse 将 .csv 文件数据读入我的网站可用的格式，然后我使用 angular 循环数据并将相关部分放在页面上。我网站中唯一使用此数据的部分是主页上的项目部分。

无论如何，我的问题是，有时当我加载页面时，无论是第一次打开 URL 时，还是从关于或联系页面切换到主页时，我注意到内容没有'不显示，我必须重新加载页面才能显示 gif 和文本。以下是一些屏幕截图： 它应该是什么样子以及它有时是什么样子。如果您想亲自查看，我还将在评论中包含指向我网站的链接（因为我还没有 10 名声望，所以我不能发布超过两个链接）。（这仍然是一项正在进行的工作，所以我承认我对发布它有点尴尬，但我真的很想解决这个问题）。

此外，这是用于页面的数据的 HTML：

<div class="projects">
<h1 class="projects-heading">Projects</h1>
<div class="container projectContainer" ng-repeat="project in projects">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <img class="projectGif" ng-src="{{project.gifUrl}}" ng-hide="projects.length < 0">
        </div>
        <div class="col-xs-12 col-md-6">
            <h4 class="project-info proj-title">{{project.title}}</h4>
            <p class="project-info proj-body">{{project.description}}</p>
            <a class="project-info" target="_blank" href="{{project.link}}">View the live site</a>
        </div>
    </div>
    <!-- Creates divier line between each separate project -->
    <hr class="project-split">
</div>

我的控制器：

app.controller('HomeController', function($scope){
Papa.parse("data/home.csv", {
    download: true,
    header: true,
    complete: function(results) {
        $scope.projects = results.data;
    }
});

});

4

2 回答 2

1

我不知道这个爸爸，但我认为这是一个异步调用，因此它在 Angular 循环之外运行。试试这个

complete: function(results) {
    $scope.projects = results.data;
    $scope.$apply();
}

Angular 有自己的事件循环，每当 Angular 知道它必须运行时，它就会运行。当修改状态的代码在 Angular 中运行时，就会发生这种情况。当循环运行时，所有变量、绑定和渲染也会更新。

在这里，您使用的是一个外部库 Papa，它只运行一个 Ajax 请求。请求在 Angular 内发送，但由于异步，结果回调在外部处理。因此，您必须强制 Angular 更新其数据。$scope.$apply() 所做的是强制事件循环仅针对该控制器进行更新。

请记住，每次运行不在 Angular 内部但会与 Angular 交互的代码时都要这样做。例如，这对于“onclick”或 jQuery 事件或 Angular 范围之外的任何代码都是有效的。

于 2015-11-26T09:27:21.613 回答
0

我在 angular 8 中有类似的问题，@simone 的答案给了我一个解决它的想法。

这是用于解决的代码angular 8

public parseCSV(file: File) {
    let _self = this;
    Papa.parse(file, {
      error: function (err, file, inputElem, reason) {
        console.log(err);
      },
      complete: function (results) {
        _self.apply(results.data);
        console.log("Finished:", results.data);
      }
    });
  }

public apply(data) {
    this.dataSource = data;
  }
于 2019-11-22T07:16:01.913 回答