Cascader级联选择的编辑实现

实如今编辑的时候将要编辑的数据显示出来。实现结果以下：

在写这个功能的时候原本项目中是有一个已完成的的相似功能的，可是当时相似的功能出问题了，错误的认为这个功能没有实现，外加对nz-form组件的不了解，致使本身又在错误的方向上从新写了一遍。

当时是参考官网想要在no-model上绑定数组来实现

父组件

assignForm() {
    this.route.paramMap.subscribe(params => {
        this.id = params.get('id');
        this.makeupService.getOneById(params.get('id')).subscribe(
            makeup => {
                // 经过请求获取数据，并使用formbuild建立一个表单
                this.editMakeupForm = this.fb.group({
                    student: makeup.student,
                    courseArrangement: makeup.courseArrangement,
                    score: makeup.score,
                });
                // 要传入子组件的数据
                this.defaultValue = [
                    makeup.student.klass.id,
                    makeup.student.id,
                ];
            },
            () => {
                console.log('获取要编辑的补考记录失败');
            },
        );
    });
}

<app-student-cascade [formGroup]="editMakeupForm" controlName="student" [defaultValue]="defaultValue"></app-student-cascade>

子组件

// 接收传入的初始值
@Input()
set defaultValue(defaultValue: Array<number>) {
    this.defaultValues = defaultValue;
}

<ng-container [formGroup]="formGroup">
    <nz-cascader
        [nzOptions]="options"
        [formControlName]="controlName"
        nzPlaceHolder="请选择学生"
        [(ngModel)]="defaultValues" // 绑定显示初始值
    >
    </nz-cascader>
</ng-container>

但当后来问了黄庭祥以后，发现实现方式以下，感受到本身在实现这个功能找错方向了。

后来更正本身的代码，发现有产生新错误

查询官网发现，参数出问题了

更改参数位置发现也能实现。

总结

要多交流，借鉴别人的经验，避免重复造轮子，避免方向出错误。