Question

我对Angular 2中的代码感到困惑。在我的ts文件中，我有：

    import { Test } from '../../../../models/test';
    import { TestService } from '../../../../services/test.service';
    import { Job} from '../../../../models/job';
    import { JobService } from '../../../../services/job.service';

    export class TestTakeMcComponent implements OnInit {
          company_name: string;
          test: Test;
          job: Job;

          constructor(
            private testService: TestService,
            private jobService: JobService
          ) { }
          ngOnInit() {
            this.getTest();
            this.getJob(this.test.id);
          }
          getTest(){
            this.testService.getById(40).subscribe(
              test => {
               if(test.data.data.length != 0){
                 this.test = test.data.data[0];
               }
              }
            );
          }
         getJob(id: number){
           this.jobService.getJobByTestId(id).subscribe();
         }
    }

在我的HTML文件中，我有：

<h3 class="box-title">{{ test?.title }} </h3>

当然，数据绑定{{ test?.title }}正在运行并显示数据。但是在我的getJob(this.test.id)文件中调用另一个函数ts时，它会显示一个未定义的参数。当它在视图中完美呈现时，它是如何变得不确定的？我想将this.test变量中的数据用于其他函数，但我不能，因为它是未定义的。请有人对我有同样的问题，你是如何解决这个问题的。谢谢。

Answer 1

这是因为console.log()在this.test获得分配值之前执行。执行是异步的，这意味着它会安排在稍后运行，而同步代码的执行会立即继续。

{{ test?.title }}首先undefined，但稍后会更新，但变化发生得太快，人类也无法识别。

如果移动console.log()，您会看到值

      getTest(){
        this.testService.getById(40).subscribe(
          test => {
           if(test.data.data.length != 0){
             this.test = test.data.data[0];
             console.log(this.test);
           }
          }
        );
      }

<强>更新

export class TestTakeMcComponent implements OnInit {
      company_name: string;
      test: Test;
      job: Job;

      constructor(
        private testService: TestService,
        private jobService: JobService
      ) { }
      ngOnInit() {
        this.getTest().subscribe(val => 
            this.getJob(this.test.id));
      }
      getTest(){
        // add `return` and replace `subscribe` by `map`
        return this.testService.getById(40).map(
          test => {
           if(test.data.data.length != 0){
             this.test = test.data.data[0];
           }
          }
        );
      }
     getJob(id: number){
       this.jobService.getJobByTestId(id).subscribe();
     }
}

Answer 2

用以下代码替换您的代码：

import { Test } from '../../../../models/test';
    import { TestService } from '../../../../services/test.service';

    export class TestTakeMcComponent implements OnInit {
          company_name: string;
          test: Test;

          constructor(
            private testService: TestService
          ) { }
          ngOnInit() {
            this.getTest();
            // console.log(this.test);
          }
          getTest(){
            this.testService.getById(40).subscribe(
              test => {
               if(test.data.data.length != 0){
                 this.test = test.data.data[0];
                 console.log(this.test);
                 this.getJob();
               }
              }
            );
          }

          getJob(){ 
              this.jobService.getJobByTestId(this.test.id).subscribe(); 
         }
    }

您刚刚将console.log()放在错误的位置。

由于this.testService.getById(40).subscribe是异步部分，所以

ngOnInit() {
    this.getTest();
    // at this time we'll not have this.test ;
    // console.log(this.test);
}

未定义的全局变量，但在Angular 2

2 个答案: