Question

所以我正在为自己创建一个个人作品集，我已经为我的简介web开发课做了一些项目。由于我们一直在课堂上练习数据驱动的内容网站和webapps，我的教授希望我们做类似的事情，或者将我们的数据放在基于云的数据存储中，或者放在.csv文件中。我决定去.csv文件路线。

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

无论如何，我的问题是，有时当我加载页面时，无论是第一次打开URL，还是当我从about或联系页面切换到主页时，我都注意到了内容没有显示，我必须重新加载页面，以显示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>

我的控制器：

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

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

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

Answer 2

我在角度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文件中读取的内容偶尔不会在页面加载时显示

2 个答案: