如何在 Angular 6 中检查带有 API 响应的复选框？答案

【问题标题】：How to check the checkbox with the API response in Angular 6?如何在 Angular 6 中检查带有 API 响应的复选框？
【发布时间】：2019-12-07 01:50:29
【问题描述】：

API 响应：

{"Business Process(es) selected in Email Authorization":"2,6,10,15","Status":"OK"}

我的复选框 HTML：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div *ngFor="let name of processList; index as index;">
        <div class="col-md-3 float-left custom-control custom-checkbox ">
          <input type="checkbox" class="custom-control-input" [id]="name.Id" [value]="name.Value"
          (change)="saveProcessValues($event)" [(ngModel)]="name.isCheck">
          <label class="custom-control-label" [for]="name.Id">{{name.ColumnName}}</label>
        </div>
      </div>

JSON 数组：

  businessProcess = [
    {
      lable: 'Label',
      name: 'defaultInline1',
      value: 1
    },
    {
      lable: 'Renewal Effort',
      name: 'defaultInline2',
      value: 2
    },
    {
      lable: 'Billing Effort',
      name: 'defaultInline3',
      value: 3
    },
    {
      lable: 'Promotion Effort',
      name: 'defaultInline4',
      value: 4
    },
    {
      lable: 'Form Letter',
      name: 'defaultInline5',
      value: 5
    },
    {
      lable: 'Order Item Added',
      name: 'defaultInline6',
      value: 6
    },
    {
      lable: 'Payment Added',
      name: 'defaultInline7',
      value: 7
    },
    {
      lable: 'Order Canceled',
      name: 'defaultInline8',
      value: 8
    },
    {
      lable: 'Order Renewed',
      name: 'defaultInline9',
      value: 9
    },
    {
      lable: 'Password Send',
      name: 'defaultInline10',
      value: 10
    },
    {
      lable: 'Credit Card Failed',
      name: 'defaultInline12',
      value: 12
    },
    {
      lable: 'Email Changed',
      name: 'defaultInline13',
      value: 13
    },
    {
      lable: 'Package Order Added',
      name: 'defaultInline14',
      value: 14
    },
    {
      lable: 'Whole Order Added',
      name: 'defaultInline15',
      value: 15
    },
    {
      lable: 'Package Renewed',
      name: 'defaultInline16',
      value: 16
    },
    {
      lable: 'Password Changed',
      name: 'defaultInline17',
      value: 17
    },
    {
      lable: 'Credit Card Expiry Imminent',
      name: 'defaultInline18',
      value: 18
    },
    {
      lable: 'Login Locked Out',
      name: 'defaultInline19',
      value: 19
    },

    {
      lable: 'Auto-Renewal Imminent',
      name: 'defaultInline20',
      value: 20
    },
    {
      lable: 'Auto-Renewal Failure',
      name: 'defaultInline21',
      value: 21
    },
    {
      lable: 'Suspension Activated',
      name: 'defaultInline22',
      value: 22
    },
    {
      lable: 'Suspension Completed',
      name: 'defaultInline23',
      value: 23
    },
    {
      lable: 'Renewal Status Changed',
      name: 'defaultInline24',
      value: 24
    },
    {
      lable: 'Subscr. ExpireDate Changed',
      name: 'defaultInline25',
      value: 25
    },
    {
      lable: 'Subscr. IssuesLeft Changed',
      name: 'defaultInline26',
      value: 26
    },
    {
      lable: 'Payment Account Changed',
      name: 'defaultInline27',
      value: 27
    },
    {
      lable: 'Subscr. Bundle Quantity Changed',
      name: 'defaultInline28',
      value: 28
    },
    {
      lable: 'Customer Added',
      name: 'defaultInline29',
      value: 29
    },
    {
      lable: 'Customer Changed',
      name: 'defaultInline30',
      value: 30
    },
    {
      lable: 'Customer Login Added',
      name: 'defaultInline31',
      value: 31
    },
    {
      lable: 'Registration Email Send',
      name: 'defaultInline32',
      value: 32
    },
    {
      lable: 'Login Email Send',
      name: 'defaultInline33',
      value: 33
    },
    {
      lable: 'Product Shipped',
      name: 'defaultInline34',
      value: 34
    },
    {
      lable: 'IP Address Changed',
      name: 'defaultInline35',
      value: 35
    },
    {
      lable: 'Deposit Used',
      name: 'defaultInline36',
      value: 36
    },
    {
      lable: 'Group Member Added',
      name: 'defaultInline37',
      value: 37
    },
    {
      lable: 'Group Member Removed',
      name: 'defaultInline38',
      value: 38
    }
  ];

组件逻辑：

if (data) {
      this.processList = [];
      const arrayList = this.businessProcess;
      arrayList.forEach(data => {
        const separateName = {
          ColumnName: data.lable,
          Id: data.name,
          Value: data.value
        }
        this.processList.push(separateName);
      });

我希望在收到来自 API 的响应时检查 checkboxes....我提到的 API 响应。假设值是 2、6、10、15，那么在页面加载时应该检查我的 checkboxes 是否有这些值。

【问题讨论】：

发布的问题似乎根本不包括任何尝试解决问题。 StackOverflow 希望您首先尝试解决自己的问题，因为您的尝试有助于我们更好地了解您想要什么。请编辑问题以显示您尝试过的内容，以说明您在Minimal, Complete, and Verifiable example 中遇到的特定障碍。如需更多信息，请参阅How to Ask 并拨打tour。

标签： angular api checkbox bootstrap-4

【解决方案1】：

似乎您没有布尔属性。因此，在获取数据后，更改了 separateName 对象，如下所示。将您的逻辑添加到IsCheck 属性，如下所示。但这是一个例子。您可以根据自己的要求进行更改。

arrayList.forEach(data => {
        const separateName = {
          ColumnName: data.lable,
          Id: data.name,
          Value: data.value,
          IsCheck: data.value === 2 || data.value === 6 || data.value === 10 || data.value === 15;
        }

然后像下面这样使用[(ngModel)]

<input type="checkbox" class="custom-control-input" [id]="name.Id" [value]="name.Value" [(ngModel)]="name.IsCheck"
          (change)="saveProcessValues($event)">

也请参考他们的DOC 了解更多详情

【讨论】：

我有 38 个复选框，它们的值从 1,2,3 等到 38...我已经在 [value] 中分配了这些值。
好的，那么您应该为[(ngModel)] 使用布尔值属性。我不知道您使用的布尔值的属性名称是什么
{ lable: 'Label', name: 'defaultInline1', value: 1 }, { lable: 'Renewal Effort', name: 'defaultInline2', value: 2 }, { lable: 'Billing努力'，名称：'defaultInline3'，值：3 }，
hmm 似乎你必须格式化那个 json 对象。所以你可以使用布尔属性。你能用服务电话更新问题吗？那我给你个提示
嘿，你能解决这个问题吗？还要确保使用 API 请求和响应处理部分更新您的问题。所以如果你的问题是好的，我会投票重新打开它

【解决方案2】：

在您的响应中创建一个布尔变量，以确定哪个复选框已选中或未选中。

processList=[{"Id":"1","Value":true,"ColumnName":"First",},{"Id":"2","Value":true,"ColumnName":"2nf"},{"Id":"3","Value":false,"ColumnName":"3rd"}]

     <div *ngFor="let name of processList; index as index;">
                  <div class="col-md-3 float-left custom-control custom-checkbox ">
                    <input type="checkbox" class="custom-control-input" [id]="name.Id" [checked]="name.Value"
                   >
                    <label class="custom-control-label" [for]="name.Id">{{name.ColumnName}}</label>
                  </div>
                </div>

如果您不想添加新的布尔标志来跟踪复选框，那么在 api 响应中为复选框返回空白值以不显示为选中。

  [checked]="name.Value" replace it with  [(ngModel)]="name.Value"

它会自动检查它的值，否则将显示未选中。

【讨论】：

【解决方案3】：

如果您在 Angular 中使用响应式表单，那么下面是使用 formcontrolname 属性的代码，我们可以使用它。

在 HTML 中：=

<div class="custom-control custom-checkbox">
                <input type="checkbox" formControlName="chkBusiness" class="custom-control-input" id="chkBusiness">
                <label class="custom-control-label" for="chkBusiness">{{'GDPRDATA.CHECKALL' | translate}}</label>
              </div>

在 TS 中：=

this.gdprForm = this.fb.group({   chkBusiness: [''], });

gdprform 是表单组的类型。

【讨论】：