Question

onInit将formGroup和formControls设置为初始状态， onInit是我进行服务调用以获取用户数据的地方，因为这是一个可观察的，我不能引用一个，直到另一个被设置 - 并且它们都被设置在onInit中 - 不保证将按顺序完成。 ..

这里有我所拥有的 - 但它不对，调用setOptions，试图设置一个尚不存在的形式。看来我需要在onInit之后设置它 - 所以我尝试了ngAfterComponentInit - 它也不起作用。

    export class xComponent implements OnInit {

    ...

    ngOnInit() {
        this.auth.getUser(this.user)
            .subscribe(
                data => {
                    this.user = data;
                    // tried this first - doesn't work
                    // this.setOptions(this.user.role);
                },
                err => {
                    console.error(err);
                }
            );

        this.form = new FormGroup({
            thing: new FormControl(
                {
                    value: this.model.thing,
                    disabled: this.formDisabled,
                }
            )
        });
    }


    // tried this next - yes, I imported 'AfterContentInit', doesn't work
    ngAfterContentInit() {
        this.setOptions(this.user.role);
    }

    private setOptions(role) {
        switch (role) {
            case 'role1': {
                this.form.get('thing').patchValue(true);
                break;
            }
            default: {
                this.form.get('thing').patchValue(false);
                break;
            }
        }
    }

}

错误：

错误类型错误：无法读取属性＆＃39;角色＆＃39;未定义的

任何帮助表示感谢。

干杯

好的 - 回答以下问题 -

我添加了所有这些以查看我可以使用的内容

ngAfterContentInit(){console.log( 'ngAfterContentInit' );console.log( this.user );}
ngAfterContentChecked(){console.log( 'ngAfterContentChecked' );console.log( this.user );}
ngAfterViewInit() {console.log( 'ngAfterViewInit' );console.log( this.user );}
ngAfterViewChecked() {console.log( 'ngAfterViewChecked' );console.log( this.user );}

这就是我得到的:(控制台日志）

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ngAfterContentInit--- undefined
ngAfterContentChecked--- undefined

ngAfterViewInit--- undefined
ngAfterViewChecked--- undefined

ngAfterContentChecked--- undefined
ngAfterViewChecked--- undefined

ngAfterContentChecked--- undefined
ngAfterViewChecked--- undefined

ngAfterContentChecked--- undefined
ngAfterViewChecked--- undefined

ngAfterContentChecked--- undefined
ngAfterViewChecked--- undefined

ngAfterContentChecked--- undefined
ngAfterViewChecked--- undefined

ngAfterContentChecked--- undefined
ngAfterViewChecked--- undefined

ngAfterContentChecked--- undefined
ngAfterViewChecked --- undefined

onInit data {_id: "5a", role: "A", …}

ngAfterContentChecked ---  {_id: "5a", role: "A", …}
ngAfterViewChecked --- {_id: "5a", role: "A", …}

我看起来像ngAfterContentChecked，ngAfterViewChecked在init之前调用了8次 - 在init之后他们有了数据 - 我想我可以在那里做一个if，并在数据到达后设置表单...

Answer 1

我尝试了相同的模式，它对我来说很好..

我尝试过使用其他生命周期钩子，但没有区别。

undefined的错误可能意味着您的服务未向您返回所需的响应（或发送未定义的对象），这就是为什么它无法读取role的属性undefined，表示您的data（或this.user说）未定义，因此无法使用属性role。

尝试console.log(data) // or this.user看看会发生什么。

您设置表单值的代码很好。

希望它有所帮助。

Answer 2

如果要在订阅中构建表单，然后设置选项呢？所以有以下几点：

.subscribe(
   data => {
     this.user = data;
     this.buildForm(this.user.role);
   },

// ...

buildForm(role) {
  this.form = new FormGroup({...});

  switch (role) {
    // ...
  }
}

这当然要求您在模板中设置条件，因为表单的构建时间晚于OnInit。

Angular5反应形式。在onInit之后更改初始形式的值

2 个答案: