Angular4前端实现动态添加属性，选中和取消选中

ng多选.gif

添加属性

    /*
    * 本地添加属性操作
    * 该函数通用，需要一个分类标识，需要往对应的数组里面添加数据
    * */
    addProperty():void{

        let str = this.strKind;//对应的分类字段
        let arrOne = {
            state: this.nowClerk.name,
            is_choice: 0,//默认不选中
        };
        console.log('数据源', arrOne);
        switch(str) {
            case 'skin':
                this.skinObj.kind_info.push(arrOne); //皮肤
                break;
            case 'toenail':
                this.toenailObj.kind_info.push(arrOne); //趾甲
                break;
            case 'tooth':
                this.toothObj.kind_info.push(arrOne); //牙齿
                break;
            case 'anus':
                this.anusObj.kind_info.push(arrOne); //肛门
                break;
            case 'coat':
                this.coatObj.kind_info.push(arrOne); //毛发
                break;
            case 'ears':
                this.earsObj.kind_info.push(arrOne); //耳朵
                break;
            case 'eyes':
                this.eyesObj.kind_info.push(arrOne); //眼睛
                break;
            default:
        }
        layer.closeAll();
        console.log();
    }

删除属性

 /*
   * 本地添加属性操作
   * 该函数通用，需要一个分类标识，需要往对应的数组里面添加数据
   * */
    delProperty(kind:string,index:number):void{
        let str = kind;//对应的分类字段
        let curIndex = index;

        console.log('数据源', curIndex);
        switch(str) {
            case 'skin':
                this.skinObj.kind_info.splice(curIndex,1);
                break;
            case 'toenail':
                this.toenailObj.kind_info.splice(curIndex,1);
                break;
            case 'tooth':
                this.toothObj.kind_info.splice(curIndex,1);
                break;
            case 'anus':
                this.anusObj.kind_info.splice(curIndex,1);
                break;
            case 'coat':
                this.coatObj.kind_info.splice(curIndex,1);
                break;
            case 'ears':
                this.earsObj.kind_info.splice(curIndex,1);
                break;
            case 'eyes':
                this.eyesObj.kind_info.splice(curIndex,1);
                break;
            case 'language':
                this.languageList.splice(curIndex,1); //常用语言
                break;
            default:
        }
        console.log('数据源this.coatObj', this.coatObj);
    }

选中/取消选中

/*
    * 构建一个选中当前属性的函数
    * 是对那个属性进行操作（kind），传入的值是当前元素的下标，看是否是选中，如果是选中则取反
    * */
    addChecked(kind:string,index:number):void{
        let str = kind;//对应的分类字段
        let curIndex = index;
        debugger
        switch(str) {
            case 'skin':
                //this.skinObj.kind_info.splice(curIndex);
                /*let arr = this.skinObj.kind_info;
                for(let item of arr){
                    if(item === index){ //该函数是错误的，取不到下标
                       item.is_choice =  item.is_choice===1 ? 0: 1;
                    }
                    return arr;
                }*/
                this.skinObj.kind_info = this.getNewArr(this.skinObj.kind_info,curIndex);
                break;
            case 'toenail':
                this.toenailObj.kind_info = this.getNewArr(this.toenailObj.kind_info,curIndex);
                break;
            case 'tooth':
                this.toothObj.kind_info = this.getNewArr(this.toothObj.kind_info,curIndex);
                break;
            case 'anus':
                this.anusObj.kind_info = this.getNewArr(this.anusObj.kind_info,curIndex);
                break;
            case 'coat':
                //this.coatObj.kind_info.splice(curIndex);
                this.coatObj.kind_info = this.getNewArr(this.coatObj.kind_info,curIndex);
                break;
            case 'ears':
                this.earsObj.kind_info = this.getNewArr(this.earsObj.kind_info,curIndex);
                break;
            case 'eyes':
                this.eyesObj.kind_info = this.getNewArr(this.eyesObj.kind_info,curIndex);
                break;
            default:
        }
        layer.closeAll();
        console.log('数据源this.skinObj', this.skinObj);

    }

    /*
    * 遍历属性，并返回新的数组
    * */
    getNewArr(arr:any,index:number){
        for(let i=0;i<arr.length; i++){
            let item = arr[i];
            if(i === index){
                item.is_choice =  item.is_choice===1 ? 0: 1;
                debugger
            }
        }
        return arr;
    }