HTML

Question

我在网站上看到了一个问题，当我进行somenthing显示时显示是正确的，例如，当我在文本框中输入内容时，它会正确显示，当我调整浏览器大小时，外观也是如此。

这是显示错误的示例：

然后这是显示正确的示例，这是在我调整浏览器大小后发生的：

我的复选框树视图将在我调整浏览器大小后显示。

这是我的代码，mybe是这里的问题：

export class AdministrationMenuGroupEditor{
rows = [];
menuList = [];
selectedMenu: any = [];

//id
public id:number;
public statusForm:string;

//form start
public form:FormGroup;
public submitButtonText:string;

public inHTML5 = true;

public name:AbstractControl;
public description:AbstractControl;
public submitted:boolean = false;

constructor(protected service:AdministrationMenuGroupEditorService, private route: ActivatedRoute, private fb:FormBuilder, _ref: ChangeDetectorRef){
    this.route.params.subscribe(params => {
        this.id = +params['id'];
    });
}

ngOnInit(){
    this.submitButtonText = 'Save';

    this.form = this.fb.group({
        'id': [],
        'name': ['', Validators.compose([Validators.required,Validators.minLength(3)])],
        'description': []
    });
    this.name = this.form.controls['name'];
    this.description = this.form.controls['description'];
    this.service.getMenuGroup()
        .subscribe(
            data => this.setMenuGroup(data['menuGroup']),
            err => this.logError(err),
            () => this.finishedGetIndexList('Save')
        );
    this.statusForm = 'Add';
    if(this.id){
        this.fetchData();
    }
}

setMenuGroup(value){
    if (value.length > 0){
        this.menuList = value;
        console.log(this.menuList);
    }
}

fetchData(){
    this.service.getIndex(this.id)
        .subscribe(
            data => this.setValueToForms(data['menuGroup']),
            err => this.logError(err),
            () => this.finishedGetIndexList('Fetch')
        );
}

toggleFormControl(formName:string,value:boolean) : void {
    let ctrl = this.form.get(formName);
    value==false ? ctrl.disable() : ctrl.enable();
    ctrl.markAsUntouched();
}

validationDataInput(value){
    if(value == 'name invalid'){
        console.log('This name was used, please input different name');
        return false;
    }
    return true;
}

setValueToForms(value) : void {
    console.log(value);
    if(value.length > 0){
        if(this.validationDataInput(value)== true){
            this.rows = value[0];
            if(this.rows['id']){
                this.id = this.rows['id'];
            }
            this.form.setValue({
                'id': this.id,
                'name': this.rows['name'],
                'description': this.rows['description']
            });
            this.menuList = value[0]['menuList'];
            this.selectedMenu = [];
            this.statusForm = 'Edit';
        }
    }
    else{
        this.statusForm = 'Add';
    }
}

onSubmit(values:Object):void{
    values['selectedMenu'] = this.selectedMenu;
    this.submitted = true;
    this.submitButtonText = 'Saving...';
    if (this.form.valid) {
        this.service.getSave(values,(this.id)?'edit':'new')
            .subscribe(
                data => this.succeededSave(data['menuGroup']),
                err => this.logError(err),
                () => this.finishedGetIndexList(' Save'),
            );
    }
}

finishedGetIndexList(msg){
    console.log('Finish '+msg);
    this.submitButtonText = 'Save';
    this.submitted = false;
}
logError(errMsg){
    let errStatus = errMsg['status'];
    window.alert('An error has been detected, please reload this page..');
    this.submitButtonText = 'Save';
    this.submitted = false;
}

succeededSave(result){
    this.setValueToForms(result);
}

}

有没有人可以帮我解决问题？