ng-zorro复选框

最新推荐文章于 2025-06-04 09:20:12 发布

原创最新推荐文章于 2025-06-04 09:20:12 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

19 篇文章

订阅专栏

Angular

17 篇文章

订阅专栏

本文介绍了如何使用ng-zorro框架，在前端实现复选框功能，并限制用户最多只能选择两个选项。通过HTML和TypeScript代码示例，展示了具体的实现步骤和逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

<label *ngFor="let field of fields">
  <label nz-checkbox [(nzChecked)]="field.checked" [(ngModel)]="field.checked" (ngModelChange)="refreshStatus($event)">{{field.value}}</label>
</label>
<br><br><br><br>
你的选择是：
<label *ngFor="let item of list">
 {{item}}&nbsp;&nbsp;&nbsp;&nbsp;
</label>

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

<label *ngFor="let field of fields">
  <label nz-checkbox [nzDisabled]="field.disable"  [(nzChecked)]="field.checked" [(ngModel)]="field.checked" (ngModelChange)="refreshStatus($event)">{{field.value}}</label>
</label>

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)
}