Angular 8 привязка данных тумблера

Question

Я пытаюсь создать тумблер вот так

, и когда я пытаюсь привязать данные к коммутатору, используя [флажок] вот так ,

 <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"