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>

但當後來問了黃庭祥以後，發現實現方式以下，感受到本身在實現這個功能找錯方向了。

後來更正本身的代碼，發現有產生新錯誤

查詢官網發現，參數出問題了

更改參數位置發現也能實現。

總結

要多交流，借鑑別人的經驗，避免重複造輪子，避免方向出錯誤。