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

Question

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

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

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

我的 Controller :

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 中运行时，就会发生这种情况。当循环运行时，所有变量、绑定(bind)和渲染也会更新。

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

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