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>

但当后来问了黄庭祥之后，发现实现方式如下，感觉到自己在实现这个功能找错方向了。