2

我在 angular 4 项目中遇到了这个问题，如果你有时间解决这个问题，我将不胜感激。

客观的

下拉值的变化我们需要根据返回值调用API，我们需要填充表单数据。[API 将遵循相同的对象结构]

  1. 我在块中提到的 for 循环没有完全运行以清空表单控件数组。

  2. 我已经通过 FormGroup 和 FormArray 类没有删除所有控件的方法。

  3. 由于对angular4的了解不完整，可能是方法不正确。

  4. 源代码片段：

    availableToolsForNewEvnList: Array<ToolsForNewEvn>;
    selectedToolsForNewEvnList: Array<ToolsForNewEvn>;

    getProjects() { //Working Fine
        this.devopsToolService.getProjects()
            .subscribe(
            projectList => {
                this.projectList = projectList as Project[];
                this.projectList.slice(0, 1).map(p => {
                    this.selectedProject = p;
                    this.onChange(p);
                });
            },
            error => this.errorMessage = <any>error);
    }


    getDevopAllToolsPojo(projectId: number) { //Error Block
        this.devopsToolService.getDevopAllToolsPojo(projectId)
            .subscribe(
            projectAllToolList => {
                this.projectAllToolList = projectAllToolList as DevopToolsPojo[];
                let control = <FormArray>this.myForm.controls['devopToolsPojo'];//ERROR in this block:Start
                console.log("BEFORE" + control.length);
                console.log(control);
                for (let i = 0; i < control.length; i++) {
                    console.log("Loop [ " + control.length + " ]");
                    console.log(control);
                    control.removeAt(i)
                }
                console.log("AFTER" + control.length);
                console.log(control);//ERROR in this block:END
                projectAllToolList.forEach(p => {
                    const addrCtrl = this.initDevopToolsPojo(p);
                    control.push(addrCtrl);
                });
                this.myForm.patchValue(projectAllToolList); //Working Fine
            },
            error => this.errorMessage = <any>error);
        this.myForm.controls['projectId'].setValue(projectId);//Working Fine
    }

    getDevopToolsPojo(projectId: number) { //Working Fine
        this.devopsToolService.getDevopToolsPojo(projectId)
            .subscribe(
            projectToolList => {
                this.projectToolList = projectToolList as DevopToolsPojo[];
            },
            error => this.errorMessage = <any>error);
    }

    getNewDevopToolsPojo(projectId: number) { //Working Fine
        this.devopsToolService.getNewDevopToolsPojo(projectId)
            .subscribe(
            tl => {
                this.availableToolsForNewEvnList = tl as ToolsForNewEvn[];
            },
            error => this.errorMessage = <any>error);
    }

    onChange(selectedProject) { //Working Fine
        this.selectedProject = selectedProject;
        this.getDevopToolsPojo(selectedProject.projectId);
        this.getDevopAllToolsPojo(selectedProject.projectId);
        this.getNewDevopToolsPojo(selectedProject.projectId);
    }

    initDevopToolsPojo(p) { //Working Fine
        return this._fb.group({
            'devopToolId': [p.devopToolId],
            'url': [p.url],
            'userName': [p.userName],
            'password': [p.password],
            'accessKey': [p.accessKey],
            'secureKey': [p.secureKey],
            'toolName': [p.toolName],
            'toolId': [p.toolId],
            'toolDesc': [p.toolDesc],
            'configured': [p.configured],
        });
    }

    ngOnInit() {
        this.myForm = this._fb.group({
            'projectId': [''],
            'devopToolsPojo': this._fb.array([])
        });
        this.initDevopToolsPojo(new DevopToolsPojo());
        this.selectedProject = new Project();
        this.getProjects();
    }

    constructor(
        private devopsToolService: DevopsToolService,
        private _fb: FormBuilder
    ) {
        this.availableToolsForNewEvnList = new Array<ToolsForNewEvn>();
        this.selectedToolsForNewEvnList = new Array<ToolsForNewEvn>();
    }

控制台日志：

**12:42:03.564 devops-tool.component.ts:70 ##BEFORE7

12:42:03.565 devops-tool.component.ts:71 FormArray {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onCollectionChange: function…}

12:42:03.569 devops-tool.component.ts:73 ##Loop [ 7 ]

12:42:03.571 devops-tool.component.ts:74 FormArray {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onCollectionChange: function…}

12:42:03.572 devops-tool.component.ts:73 ##Loop [ 6 ]

12:42:03.573 devops-tool.component.ts:74 FormArray {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onCollectionChange: function…}

12:42:03.574 devops-tool.component.ts:73 ##Loop [ 5 ]

12:42:03.575 devops-tool.component.ts:74 FormArray {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onCollectionChange: function…}

12:42:03.576 devops-tool.component.ts:73 ##Loop [ 4 ]

12:42:03.577 devops-tool.component.ts:74 FormArray {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onCollectionChange: function…}

12:42:03.578 devops-tool.component.ts:77 ##AFTER3** 

***//There are 3 more records to be remove form list.*

12:42:03.580 devops-tool.component.ts:78 FormArray {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onCollectionChange: function…}

12:42:03.583 devops-tool.component.ts:80 (7) [Object, Object, Object, Object, Object, Object, Object]**
4

2 回答 2

0

如果您使用的是表单数组，则可以将控件设置为空数组：

removeAllQuestions() {
  console.log(this.myForm.get('devopToolsPojo'));
  this.questionForm.get('devopToolsPojo').controls = [];
  console.log(this.myForm.get('devopToolsPojo'));
}

现场 plunker 演示

于 2017-07-28T07:54:08.443 回答
0

您正在从正在迭代的数组中删除项目，无论您使用什么技术，这都不是一个好主意。

您可以创建您正在迭代的数组的副本，并在迭代原始数组时从重复数组中删除项目

或者

遍历一个数组，但如果原始数组中的一项满足某些条件，则构建一个新数组。

在任何情况下，通过避免添加和删除项目（从您正在迭代的数组中）将为您省去很多麻烦。

于 2017-07-28T07:54:16.517 回答