从 .csv 文件读入的内容有时不会在页面加载时显示

Question

所以我正在为自己制作个人作品集，其中包括一些我为我的入门级网络开发人员所做的项目 class。由于我们一直在 class 实践数据驱动的内容网站和网络应用程序，我的教授希望我们做类似的事情，将我们的数据放在基于云的数据存储或 .csv 文件中。我决定采用 .csv 文件路径。

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

无论如何，我的问题是有时当我加载页面时，无论是第一次打开 URL，还是从关于或联系页面切换到主页时，我注意到内容没有显示，我必须重新加载页面才能显示 gif 和文本。以下是一些屏幕截图：What it should look like and What it sometimes looks like。如果你想亲眼看看。（它仍在进行中，所以我承认我对 post 有点尴尬，但我真的很想解决这个问题）。

此外，这里是 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;
    }
});

});

Answer 1

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

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

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

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

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

Answer 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;
  }

从 .csv 文件读入的内容有时不会在页面加载时显示

Content read in from a .csv file occasionally not showing up on page load

html

javascript

csv

angularjs

papaparse