Angular 角度2，can'；在ngOnInit中订阅后无法获取数据

我有一个问题，也许我不知道该怎么做，但是当我在运行过程中试图从HttpRequest捕获数据时，我的console.log会返回一个“undefined”值。 问题是，当我在我的模板视图中使用这个值时，它是有效的

这是我的组件

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.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,
                ])
            });
        }

    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。

尝试以下操作：

    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。

尝试以下操作：

类型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);
    });
}

试着这样做：

类型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

可以为空吗？这个id不是空的！问题是this.referentiel在Ngonit第一次通过该函数时为null。我不知道为什么！默认情况下，变量未定义，因此引用未定义。当为其指定值时，它将被定义。如果id存在，则仅在subscribe函数中出现。当subscribe完成console.log和formgroup时，应该已经executed@KrishnanunniJeevan是的，我明白！这正是我的问题：/我现在该怎么做？@ValentinFerey，正如我所回答的，将使用referentiel变量的逻辑移动到一个公共函数。从else条件调用它，并且在subscribe函数中可以

this.id

为null吗？这个id不是null！问题是this.referentiel在Ngonit第一次通过该函数时为null。我不知道为什么！默认情况下，变量未定义，因此引用未定义。当为其指定值时，它将被定义。如果id存在，则仅在subscribe函数中出现。当subscribe完成console.log和formgroup时，应该已经executed@KrishnanunniJeevan是的，我明白！这正是我的问题：/我现在该怎么做？@ValentinFerey，正如我所回答的，将使用referentiel变量的逻辑移动到一个公共函数。从else条件调用它，在subscribe函数中，此id不为null！问题是this.referentiel在Ngonit第一次通过该函数时为null。我不知道为什么！这个id不是空的！问题是this.referentiel在Ngonit第一次通过该函数时为null。我不知道为什么！这不起作用。。。我有一个新错误：错误：formGroup需要一个formGroup实例。请传入一个。这是不同的错误。在您的HTML模板中，您是否设置了表单元素Yes I am，在我用您的代码更改我的代码之前，此错误不存在：/能否将表单包装在div中并放置ngif。我感觉表单在订阅完成之前呈现并抛出此错误。很抱歉，它应该是*ngIf=“isNew | | referentiel”。或者，您可以在buildForm函数中将布尔变量默认设置为false，并将其设置为true。这不起作用。。。我有一个新错误：错误：formGroup需要一个formGroup实例。请传入一个。这是不同的错误。在您的HTML模板中，您是否设置了表单元素Yes I am，在我用您的代码更改我的代码之前，此错误不存在：/能否将表单包装在div中并放置ngif。我感觉表单在订阅完成之前呈现并抛出此错误。很抱歉，它应该是*ngIf=“isNew | | referentiel”。或者，您可以在buildForm函数中将布尔变量默认设置为false，并将其设置为true