Angular 2，在 ngOnInit 中订阅后无法获取数据答案

【问题标题】：Angular 2, can't get data after subscribe in ngOnInitAngular 2，在 ngOnInit 中订阅后无法获取数据
【发布时间】：2018-05-01 02:54:22
【问题描述】：

我有一个问题，也许我不明白该怎么做，但是当我尝试在角度 ngOnInit 期间从 HttpRequest 捕获数据时，我的 console.log 会返回一个“未定义”值。问题是，当我在模板视图中使用此值时，它会起作用！

这是我的组件

export class ReferentielFormComponent implements OnInit {
  id: number;
  currentUser;
  referentiel;
  progressValue: number;
  formGroup: FormGroup;
  isNew: boolean;

  constructor(private service: AppService,
          private referentiels: ReferentielService,
          private router: ActivatedRoute,
          private config: NgbTabsetConfig) {
  }

  ngOnInit() {
    this.router.params.subscribe((params: Params) => this.id = params['id']);
    if (this.id) {
      this.referentiels.getReferentiel(this.id).subscribe(data => this.referentiel = data);
    } else {
      this.referentiel = {};
    }
    this.isNew = !this.referentiel;

    console.log(this.referentiel);
    console.log(this.isNew);
    this.progressValue = 20;

    this.formGroup = new FormGroup({
      titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
        Validators.required,
      ]),
      description: new FormControl(!this.isNew ? this.referentiel.description : '', [
        Validators.required,
      ])
    });
  }
}

变量 this.referentiel 返回一个未定义的值，因此我无法将我的表单绑定到现有值...

有什么建议吗？

【问题讨论】：

this.id 可以为空吗？
这个id不为空！问题是 this.referentiel 在 ngOnInit 第一次传入该函数时为空。我不知道为什么！
默认变量是未定义的，因此引用是未定义的。当一个值被分配给它时，它就被定义了。如果 id 存在，它只发生在 subscribe 函数中。到订阅完成时，console.log 和 formgroup 已经被执行了
@KrishnanunniJeevan 是的，我明白了！这正是我的问题：/我现在应该怎么做？
@ValentinFerey，正如我已经回答的那样，将使用引用变量的逻辑移动到一个公共函数中。从 else 条件和订阅函数内部调用它

标签： angular http typescript subscribe ngoninit

【解决方案1】：

this.referentiel is undefined till the subscribe completes. I think you have to move the formbuilder code to subscribe.




  ngOnInit() {
        this.router.params.subscribe((params: Params) => this.id = params['id']);
        if (this.id) {
            this.referentiels.getReferentiel(this.id).subscribe(data => {
                    this.referentiel = data;
                    this.buildForm(););
            }
            else {
                this.buildForm();
                this.referentiel = {};
            }
        }
        //Build form function
        buildForm() {
            this.isNew = !this.referentiel;
            this.formGroup = new FormGroup({
                titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
                    Validators.required,
                ]),
                description: new FormControl(!this.isNew ? this.referentiel.description : '', [
                    Validators.required,
                ])
            });
        }

【讨论】：

这不起作用...我有一个新错误：错误错误：formGroup 需要一个 FormGroup 实例。请传一个。
那是不同的错误。在您的 HTML 模板中，您是否设置了表单元素
是的，这个错误在我用你的代码更改之前不存在：/
你能把表单包装在一个div中，然后放一个ngif。
。我感觉在订阅完成之前呈现表单并抛出此错误
对不起，它应该是 *ngIf="isNew || referentiel"。或者，您可以将布尔变量默认设置为 false，并在 buildForm 函数中将其设置为 true

【解决方案2】：

试试这个：

    ngOnInit() {
        this.router.params.subscribe((params: Params) => this.id = params['id']
        if (this.id) {
          this.referentiels.getReferentiel(this.id).subscribe(data => this.referentiel = data);
        } else {
          this.referentiel = {};
        }
        this.isNew = !this.referentiel;

        console.log(this.referentiel);
        console.log(this.isNew);
        this.progressValue = 20;

        this.formGroup = new FormGroup({
          titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
            Validators.required,
          ]),
          description: new FormControl(!this.isNew ? this.referentiel.description : '', [
            Validators.required,
          ])
        });
        );
      }

this.is 尚未在订阅之外定义。

【讨论】：

【解决方案3】：

试试这样：

类型 1：

ngOnInit() {
    this.router.params.subscribe((params: Params) => {
        this.load(params['id']);
    });
}

load(id) {
    this.id = id;
    console.log('this.id', this.id);
}

类型 2：

ngOnInit() {
    this.router.params.subscribe((params: Params) => {
        this.id = params['id'];
    }, () => {
        console.log('this.id', this.id);
    });
}

【讨论】：

这个id不为空！问题是 this.referentiel 在 ngOnInit 第一次传入该函数时为空。我不知道为什么！