angular - Angular 8 拨动开关数据绑定

Question

我正在尝试创建这样的拨动开关

当我尝试像这样使用 [checked] 将数据绑定到开关时，

 <div class="mb-3">
      <div class="d-flex mb-2">
        <div class="p-2 w-100 bd-highlight">{{ 'BasicData.DeleteDoc' | translate }}</div>
        <div class="p-2 flex-shrink-1">
          <div class="custom-control custom-switch">
            <input name="deleteDoc" id="deleteDoc" type="checkbox" class="custom-control-input" [checked]="ConfigList[4].FieldValue" (change)="updateControlSettings(5)">
            <label class="custom-control-label" for="deleteDoc"></label>
          </div>
        </div>
      </div>
    </div>

还有我从服务中收到的数据

[
    {
        "Id": 4,
        "FieldName": "Insert Doc",
        "FieldDescription": "Insert Doc",
        "FieldType": "boolean",
        "FieldValue": true
    },
    {
        "Id": 5,
        "FieldName": "DeleteDocument",
        "FieldDescription": "DeleteDocument",
        "FieldType": "boolean",
        "FieldValue": true
    }
]

那么值是未定义的。有什么建议可以解决这个问题吗？

Answer 1

<div class="custom-control custom-switch"  *ngIf="ConfigList">
            <input name="deleteDoc" id="deleteDoc" type="checkbox" class="custom-control-input" [checked]="ConfigList[4].FieldValue" (change)="updateControlSettings(ConfigList[4])">
            <label class="custom-control-label" for="deleteDoc"></label>

这个 *ngIf="ConfigList" 可以解决问题

Answer 2

如果您不希望在上述情况下选中复选框，您可以使用安全导航运算符- https://angular.io/guide/template-syntax#safe-navigation-operator。

如下图——

[checked]="ConfigList[4]?.FieldValue"