Question

在ngOint事件中设置变量值后，我在访问变量值时遇到问题，val的值在GetApps函数中可用，但在进程函数下不可用

TS

export class SomeComponent implements OnInit {
val:any;
 ngOnInit() {
 this.GetApps();
 this.process()
}

  GetApps() {
         this._srvc.getApps()
            .subscribe(
            data => {
             this.val = data;
            console.log(this.val);
            },
            error => this.showMessage('some error: ' + <any>error, 1));
    }

   this.process()
   {
     console.log(val) //is undefined
   }


}

Answer 1

您没有在val函数中设置GetApps。您可以在传递给subscribe的回调函数中对其进行设置。

getApps异步运行，并且在调用process函数时，回调函数尚未运行。

您可以在回调函数中调用process函数。

Answer 2

@sloth的答案是正确的。但是，如果要以同步方式访问异步代码，则可以考虑使用async / await。

将您的可观察成果转化为承诺，以便可以等待
将您的GetApps转换并初始化为异步函数，以等待其中的承诺
等待结果并同步调用其他函数

export class SomeComponent implements OnInit {
  val:any;

  async ngOnInit() { // transform this into an async function
    try {            // handle errors in synchronous try-catch code
      const val = await this.GetApps();
      this.process(val);  // do something

    } catch(error) {
      this.showMessage('some error: ' + <any>error, 1)
    }
  }

  async GetApps() { // transform this into an async function
    return this._srvc.getApps().toPromise(); // transform this into a Promise
  }

  this.process(val: any) {
    console.log(val) // is not undefined!
  }

}

这里发生的是await this.GetApps()将阻止函数执行，直到诺言得以解决。

Answer 3

val:any = null;

.subscribe是异步的，因此this._srvc.getApps（）响应在执行this.process（）时可能不可用。这就是为什么它显示该错误。为避免这种情况，您始终可以使用适当的类型来初始化变量。这就是TS的目的

Answer 4

我想出了另一种方法来解决此问题，因此，如果您需要访问ngOnint中的变量，并且不想在subscribe GetApp中调用process方法，则可以使用全局val

1）将其添加到构造函数内部的app.component中

val:any;
 constructor(private _param: AppParamasService, private _service: AppComponentService) {
 this._srvc.getApps()
            .subscribe(
            data => {
             this.val = data;
             this._param.SetAppValSource(this.val);
            },
            error => this.showMessage('some error: ' + <any>error, 1));

2）app-params.service（共享服务）

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';

@Injectable()

export class AppParamasService {

    constructor(private _http: Http) {

    }

    public appVal: Subject<any> = new BehaviorSubject<any>(null);
    SetAppValSource(apps: any) {
        this.appVal.next(apps);
    }

3）最后进入SomeCompoent构造函数类

export class SomeComponent implements OnInit {
val:any;
      constructor(private _appParams: AppParamasService){

        _appParams.appVal.subscribe((val) => {
            this.val = val;

        });
       }
 ngOnInit() {
        this.process()
      }

    this.process()
   {
     console.log(val) value is recognized 
   }

}

在ngOint事件下，Angular Value为null

4 个答案: