使用httpclient服务以异步方式加载本地json

我试图通过Angular服务调用LoadJSON，而不是在ngOnInit上，而是在用户请求的按钮上。它确实加载它，但不异步执行。我得到以下错误：错误：未捕获承诺：类型错误：

我是新手，所以请不要妄下判断

core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at PollComponent.push../src/app/components/poll/poll.component.ts.PollComponent.shuffle (poll.component.ts:23)
    at PollComponent.<anonymous> (poll.component.ts:44)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at fulfilled (tslib.es6.js:68)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at resolvePromise (zone.js:831)
    at zone.js:741
    at fulfilled (tslib.es6.js:68)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
defaultErrorLogger @ core.js:15724
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15772
next @ core.js:17771
schedulerFn @ core.js:13515
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
(anonymous) @ core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
onHandleError @ core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:502
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770

我真的希望它等到整个Json加载完毕，这样我就可以选择在HTML上显示哪些元素。它确实显示了这些错误，但它显示了这些错误。如果我想动态加载一些其他json，它将不再工作

---

提前谢谢

我认为您需要在调用startTestClick时在subscribe中移动一些逻辑

大概是这样的：

async startTestClick() {

    var promise = await this.pollService.getQuestions().subscribe(data => {
        this.que = data;
        this.nrSakte = 0;
        this.testQuestions = this.shuffle(this.que).slice(0,50);
        for (let entry of this.testQuestions) {
            entry.picture ="A";
            entry.color = "black";
        }
    });
    ...
}

如果没有这个，剩下的代码将在订阅等待结果时运行，而this.que还没有任何结果

我不认为您真的需要异步/等待。所以，这也可以奏效

startTestClick() {

    this.pollService.getQuestions().subscribe(data => {
        this.que = data;
        this.nrSakte = 0;
        this.testQuestions = this.shuffle(this.que).slice(0,50);
        for (let entry of this.testQuestions) {
            entry.picture ="A";
            entry.color = "black";
        }
    });
    ...
}

同样，您正在对document.getElementsByClassName调用使用wait，因此我可能错了。这个电话可能也需要在订阅中

---

两种方法都试一下，看看哪一种有效。如果这不能解决你的问题，我可以删除这个答案。这是一个基于帖子内容的猜测，但太多了，无法发表评论。

看看这个答案：谢谢你的回复。这是不一样的。它确实加载数据，但不异步加载。我想，订阅是异步的。我只是试着做了第一步和第二步，但行为还是没有改变@jpavelAnd关于尝试重新排列代码，例如，将getQuestions的返回类型切换为promise返回this.http.getthis.\u url.toPromise；=>我注意到您想稍后使用wait…请检查PollComponent中的shuffle函数。你的帖子里没有给出。我试着用wait，如果可以的话，我真的不需要它。我只想完全加载大小为11MB的Json文件，然后执行this.nrSakte=0；this.testQuestions=this.shufflethis.que.slice0,50；对于this.testQuestions的let条目{entry.picture=A；entry.color=black；}let A=document.getelementsbyclassname alternativa；a{a[j]中的forlet j.设置属性样式，背景色：fafafa；；}@jpavel

async startTestClick() {

    var promise = await this.pollService.getQuestions().subscribe(data => {
        this.que = data;
        this.nrSakte = 0;
        this.testQuestions = this.shuffle(this.que).slice(0,50);
        for (let entry of this.testQuestions) {
            entry.picture ="A";
            entry.color = "black";
        }
    });
    ...
}

startTestClick() {

    this.pollService.getQuestions().subscribe(data => {
        this.que = data;
        this.nrSakte = 0;
        this.testQuestions = this.shuffle(this.que).slice(0,50);
        for (let entry of this.testQuestions) {
            entry.picture ="A";
            entry.color = "black";
        }
    });
    ...
}