角度打字稿页面上的数组为空答案

【问题标题】：Array is empty on angular typescript page角度打字稿页面上的数组为空
【发布时间】：2020-11-29 04:40:05
【问题描述】：

我正在用一个名为“getQuestionsWithInterviewId”的函数填充我的字符串“Questions”，但是当我在 ngOnInit 和 ngAfterContentInit 方法中使用 console.log 调用它时，它看起来是空的。

import { Component, OnInit } from '@angular/core';
import { QuestionService } from '../_services/question.service';
import { Question } from '../_models/model';

@Component({
   selector: 'app-interview',
   templateUrl: './interview.component.html'
 })

 export class InterviewComponent implements OnInit {

 questions: Question[]=[];

 constructor(private questionService: QuestionService) {

 }

 ngOnInit(): void {
 }

 ngAfterContentInit() {
    this.getQuestionsWithInterviewId(1);
    console.log(this.questions);

    $(".tab-wizard").steps({
      headerTag: "h6",
      bodyTag: "section",
      transitionEffect: "fade",
      titleTemplate: '<span class="step">#index#</span> #title#',
      labels: {
        finish: "end"
      },
      onFinished: function (event, currentIndex) {
        alert("end");
      }
    });

  }

  getQuestionsWithInterviewId(interviewId: number) {
    this.questionService.getQuestionsWithInterviewId(interviewId).subscribe(a => {
    this.questions = a;
  },
  error => {
    console.log(error);
  });
 }

}

但是当我在 component.html 页面上使用 'questions' 数组时，我可以看到结果。

如果我在 'getQuestionsWithInterviewId' 函数中执行 console.log 操作，我可以获得结果。

getQuestionsWithInterviewId(interviewId: number) {
this.questionService.getQuestionsWithInterviewId(interviewId).subscribe(a => {
  this.questions = a;
  console.log(this.questions);
},
  error => {
    console.log(error);
  });
 }

question.service.ts 页面；

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Question } from '../_models/model';

@Injectable({
  providedIn: 'root'
})
export class QuestionService {

  baseUrl: string = 'https://localhost:44388/api/questions/';

  constructor(private http: HttpClient) {

  }

  getQuestionsWithInterviewId(interviewId: number): Observable<Question[]> {
    return this.http.get<Question[]>(this.baseUrl + 
"GetQuestionsWithInterviewId/" + interviewId);
  }


}

【问题讨论】：

标签： javascript arrays angular typescript ngoninit

【解决方案1】：

这是因为 getQuestionsWithInterviewId 使用了来自 questionService 的 observable。

questions 在您分配 this.questions = a 时填充。当订阅被触发时会发生这种情况。仅在所有调用堆栈为空后才会触发订阅。所以这发生在ngAfterContentInit 完成执行之后。

要对订阅中的数据执行操作，您必须在 subscribe 回调中进行操作。

更新

ngOnInit() {   
    this.questionService.getQuestionsWithInterviewId(1).subscribe(a => {
      this.questions = a;
      // this console log will do
      console.log(this.questions);
      // feel free to do your magic with questions here
    },
}

【讨论】：

我该怎么办？我分享了 question.service.ts 页面
@pbachman 发布了功能示例。在他的情况下，控制台日志将正确记录问题

【解决方案2】：

您的组件中不需要额外的方法“getQuestionsWithInterviewId”，您可以直接调用该服务。我建议在 ngOnInit 上执行此操作，如下所示：

ngOnInit() {   
    this.questionService.getQuestionsWithInterviewId(1).subscribe(a => {
      this.questions = a;
      console.log(this.questions);
    },
    error => {
        console.log(error);
      });
    }
    
    $(".tab-wizard").steps({
        headerTag: "h6",
        bodyTag: "section",
        transitionEffect: "fade",
        titleTemplate: '<span class="step">#index#</span> #title#',
        labels: {
          finish: "end"
        },
        onFinished: function (event, currentIndex) {
          alert("end");
        }
     });
}

【讨论】：