ng-zorro复选框

html:






你的选择是:

ts:

fields= [
  { key: 'sumBattery', value: '电池总数',checked:false },
  { key: 'averageSOC', value: '电池最高soc平均',checked:false  },
  { key: 'averageCapacity', value: '电池总容量平均',checked:false },
  { key: 'differernceCapacity', value: '电池总容极差',checked:false },
  { key: 'averageHealth', value: '电池健康平均',checked:false  },
  { key: 'differernceHealth', value: '电池健康极差',checked:false },
  { key: 'highPressure', value: '电池超高压报警总数',checked:false  },
  { key: 'highTemperature', value: '电池超高温报警总数' ,checked:false },
  { key: 'differerncePressure', value: '电池压差报警总数',checked:false  },
  { key: 'differernceTemperature', value: '电池温差报警总数',checked:false  },
];
list=[] // 用来接收复选框选择的值
refreshStatus(): void {
  this.list=[]   // list 一定要定义为局部变量
  this.fields.forEach(data => {
    if (data.checked === true) {
      this.list.push(data.value)
    }
  });
  console.log("---------", this.list)
}

效果图:

最多选2个

 

html 

ts 

fields = [
    {key: 'sumBattery', value: '电池总数', checked: false,disable:false},
    {key: 'averageSOC', value: '电池最高soc平均', checked: false,disable:false},
    {key: 'averageCapacity', value: '电池总容量平均', checked: false,disable:false},
    {key: 'differernceCapacity', value: '电池总容极差', checked: false,disable:false},
    {key: 'averageHealth', value: '电池健康平均', checked: false,disable:false},
    {key: 'differernceHealth', value: '电池健康极差', checked: false,disable:false},
    {key: 'highPressure', value: '电池超高压报警总数', checked: false,disable:false},
    {key: 'highTemperature', value: '电池超高温报警总数', checked: false,disable:false},
    {key: 'differerncePressure', value: '电池压差报警总数', checked: false,disable:false},
    {key: 'differernceTemperature', value: '电池温差报警总数', checked: false,disable:false},
];
refreshStatus(): void {
    this.list = []
    this.fields.forEach(data => {
        if (data.checked === true) {
            this.list.push(data.value)
        }
    });
    if(this.list.length>=2){
        this.fields.forEach(da=>{
            if(da.checked === true){
                da.disable=false
            }
            else {
                da.disable=true
            }
        })
    }else {
        this.fields.forEach(da=>{
            da.disable=false
        })
    }
    console.log("---------------", this.fields)
}

你可能感兴趣的:(Angular,CSS)