angular - Angular 2，在 ngOnInit 中订阅后无法获取数据

Question

我有一个问题，也许我不明白该怎么做，但是当我尝试在角度 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 给我返回了一个未定义的值，因此我无法将我的表单绑定到现有值...

有什么建议么 ？

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

Answer 2

试试这样：

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

Answer 3

尝试这个：

    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 尚未在订阅之外定义。