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给我一个未定义的，所以我不能因为那个而绑定我的Form和现有的值......

有什么建议吗？

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

Try like this :

Type 1 :

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

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

Type 2 :

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

Answer 3

Try this:

    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 isn't defined yet outside the subscribe.

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

3 个答案: