Cascader级联选择的编辑实现

框架

浏览数:264

2019-3-24

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

在写这个功能的时候本来项目中是有一个已完成的的类似功能的,但是当时类似的功能出问题了,错误的认为这个功能没有实现,外加对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>

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

后来更正自己的代码,发现有产生新错误

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

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

总结

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