从 .csv 文件读取的内容偶尔不会在页面加载时显示答案

【问题标题】：Content read in from a .csv file occasionally not showing up on page load从 .csv 文件读取的内容偶尔不会在页面加载时显示
【发布时间】：2015-11-26 06:59:20
【问题描述】：

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

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

无论如何，我的问题是，有时当我加载页面时，无论是第一次打开 URL 时，还是从关于或联系页面切换到主页时，我注意到内容没有显示，我必须重新加载页面才能显示 gif 和文本。以下是一些屏幕截图：What it should look like 和 What it sometimes looks like。如果您想亲自查看，我还将在 cmets 中包含指向我网站的链接（因为我还没有 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;
    }
});

});

【问题讨论】：

我的作品集：students.washington.edu/jgb93/info343/portfolio/#/home
ng-hide="projects.length
@xbirkettx 哦，是的，完全多余。那是我正在测试并忘记删除的东西。谢谢你抓住它！但是，是的，我在想这可能是一个时间问题，我只是不知道如何解决这个问题。如果您能提供帮助，那就太好了！我现在正在发布我的控制器！

标签： javascript html angularjs csv papaparse

【解决方案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 范围之外的任何代码都是有效的。

【讨论】：

看起来它可能奏效了——这有点难以判断，因为我唯一能做的就是反复刷新页面来测试它。我会继续测试。但是，如果这确实解决了它，您介意解释添加该行的作用吗？ @xbirkettx
太棒了！谢谢你。自从我添加了这行代码后，看起来我没有遇到任何问题！

【解决方案2】：

我在 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;
  }

【讨论】：