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

Posted 2023-03-13

【中文标题】角度打字稿页面上的数组为空

【英文标题】：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);
  

【参考方案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");
        
     );