本周遇到的问题,在这里说明一下解决方法.

1.select选择框默认选中

在写编辑的时候,再写教师列表下拉框时,和所选教师并没有自动选中,猜想虽然属性值都一样,但因为是两个不同的对象所致.

<nz-select [nzMaxMultipleCount]="5" style="width: 100%" nzMode="multiple" nzPlaceHolder="Please select" formControlName="teacherList">
            <nz-option *ngFor="let teacher of teacherList" [nzLabel]="teacher.name" [nzValue]="teacher"></nz-option>
          </nz-select>

将value值改成teacher.Id后,成功的选中了:

//把teacherList改成teacherId的集合
<nz-select [nzMaxMultipleCount]="5" style="width: 100%" nzMode="multiple" nzPlaceHolder="Please select" formControlName="teacherList">
            <nz-option *ngFor="let teacher of teacherList" [nzLabel]="teacher.name" [nzValue]="teacher.teacherId"></nz-option>
          </nz-select>

clipboard.png
但是这样太麻烦了,要重复的将teacherId集合和teacher集合来回转换.
本来像按照java一样重写方法使根据id相比判断相等,没找着,之后去看nz-select的官方文档时,发现了一个[compareWith]属性,传入一个对象比较的方法,就可以根据定义的对象比较方法了.

<nz-select [nzMaxMultipleCount]="5" style="width: 100%" nzMode="multiple" nzPlaceHolder="Please select" formControlName="teacherList" [compareWith]="getCompareTeacherEqual">
            <nz-option *ngFor="let teacher of teacherList" [nzLabel]="teacher.name" [nzValue]="teacher"></nz-option>
          </nz-select>

2.注入课程类别

因为课程类别在很多地方用到,为了方便维护,就统一写一个值提供商,注册在主模块,方便使用时将它注入.
定义课程类别:

export const COURSE_TYPE = [
    {name: '选修课', value: 0},
    {name: '公共课', value: 1},
    {name: '必修课', value: 2}
];

注册到主模块:

 providers: [
        {provide: 'COURSE_TYPE', useValue: COURSE_TYPE}
    ]

因为注册的令牌是字符串,注入器不能根据类型自动注入,所以使用时使用@Inject装饰器手动注入:

@Inject('COURSE_TYPE') public courseType

总结

感觉需要学习的还很多,继续努力把


鲸冬香
456 声望27 粉丝