У меня есть ошибка с флажком внутри моей angular формы, управляемой шаблоном ,,

Question

У меня есть форма, управляемая шаблоном, включающая флажки, такие как:

<div class="form-group">
    <label class="col-sm-3 control-label">Communication</label>
    <div class="col-sm-9">
        <label class="checkbox-inline">       
            <input type="checkbox" name="email" #email="ngModel" [(ngModel)]="projectSettings.communication.email" value="email">Email
        </label>

        <label class="checkbox-inline">
            <input type="checkbox" name="sms" #sms="ngModel" [(ngModel)]="projectSettings.communication.sms" value="sms">SMS
        </label>

        <label class="checkbox-inline">
            <input type="checkbox" name="phone" #phone="ngModel" [(ngModel)]="projectSettings.communication.phone" value="phone">Phone
        </label>
    </div>
</div>

, и у меня есть две модели данных, например:

import { Communication } from './communication.model';

export class WizardData {
    id: number;
    name: string = '';
    owner: string = '';
    customer: string = '';
    email: string = '';
    phone: string = '';
    webSite: string = '';
    language: string = '';
    time: string = '';
    communication: Communication; 
    address1: string = '';
    address2: string = '';
    postCode: string = '';
    state: string = '';
    country: string = '';
    city: string = '';

    clear() {
        this.name = '';
        this.owner = '';
        this.customer = '';
        this.email = '';
        this.phone = '';
        this.webSite = '';
        this.language = '';
        this.time = '';
        this.communication.email = '';
        this.communication.sms = '';
        this.communication.phone = '';
        this.address1= '';
        this.address2= '';
        this.postCode= '';
        this.city = '';
        this.state= '';
        this.country = '';
    }
}


export class ProjectDetails {
    name: string = '';
    owner: string = '';
    customer: string = '';
    email: string = '';
    phone: string = '';
    webSite: string = '';
}


export class ProjectSettings {
    language: string = '';
    time: string = '';
    communication: Communication;
}


export class DeliveryDetails {
    address1: string = '';
    address2: string = '';
    postCode: string = '';
    city: string = '';
    state: string = '';
    country: string = '';
}

, а другая модель данных, которая находится внутри последней, например:

export class Communication {
    email: string = '';
    sms: string = '';
    phone: string = '';
}

, когда я запускаю свое приложение, появляется эта ошибка для входных данных type = "checkbox" в части [(ngModel)] = "projectSettings.communication.email" (когда я ее удаляю и все будет быть в порядке!):

ОШИБКА TypeError: Невозможно прочитать свойство 'email' неопределенного в Object.eval [как updateDirectives] (ProjectSettingsComponent. html: 26) в Object.debugUpdateDirectives [as updateDirectives] (core. js: 45259) в checkAndUpdateView (core. js: 44271) в callViewAction (core. js: 44637) в execComponentViewsAction (core. js: 44565) в checkAndUpdateView (core. js) : 44278) в callViewAction (core. js: 44637) в execEmbeddedViewsAction (core. js: 44594) в checkAndUpdateView (core. js: 44272) в callViewAction (core. js: 44637) View_ProjectSettingsComponent0 nt. html: 26 proxyClass @ compiler. js: 19671 logError @ core. js: 45546 handleError @ core. js: 6066 (анонимный) @ core. js: 41058 invoke @ zone-evergreen . js: 359 run @ zone-evergreen. js: 124 runOutside Angular @ core. js: 39572 tick @ core. js: 41055 (анонимный) @ core. js: 40893 invoke @ zone-evergreen. js: 359 onInvoke @ core. js: 39699 invoke @ zone-evergreen. js: 358 run @ zone-evergreen. js: 124 run @ core. js: 39511 следующая @ core. js: 40890 schedulerFn @ core. js: 35336 tryOrUnsub @ Подписчик. js: 185 следующий @ Подписчик. js: 124 _следующий @ Подписчик. js: 72 следующий @ Подписчик. js: 49 следующий @ Тема. js: 39 emit @ core. js: 35298 checkStable @ core. js: 39642 onHasTask @ core. js: 39719 hasTask @ zone-evergreen. js: 411 _updateTaskCount @ zone-evergreen. js: 431 _updateTaskCount @ zone-evergreen. js: 264 runTask @ zone-evergreen. js: 185 dumpMicroTaskQueue @ zone-evergreen. js: 559 Promise. затем (asyn c) scheduleMicr oTask @ zone-evergreen. js: 542 scheduleTask @ zone-evergreen. js: 381 scheduleTask @ zone-evergreen. js: 211 scheduleMicroTask @ zone-evergreen. js: 231 scheduleResolveOrReject @ zone-evergreen. js: 845 затем @ zone-evergreen. js: 955 bootstrapModule @ core. js: 40600 ./src/main.ts @ main.ts: 11 __webpack_require @ bootstrap: 79 0 @ main.ts: 12 webpack_require @ bootstrap: 79 checkDeferredModules @ bootstrap: 45 webpackJsonpCallback @ bootstrap: 32 (анонимный) @ main. js: 1 ProjectSettingsComponent. html: 26 ОШИБКА КОНТЕКСТА DebugContext_ {view: {…}, nodeIndex: 27, nodeDef: {…}, elDef: {…}, elView: {…}}

просьба помочь!

Answer 1

Скорее всего, вы получаете данные каким-то асинхронным методом c, что означает, что projectSettings.communication еще не установлен. Вам следует использовать распознаватель, чтобы получить данные до визуализации компонента, или использовать *ngIf, чтобы вы могли подождать его:

<div *ngIf="projectSettings.communication" class="form-group">
  <label class="col-sm-3 control-label">Communication</label>
  <div class="col-sm-9">
    <label class="checkbox-inline">       
      <input type="checkbox" name="email" #email="ngModel"
             [(ngModel)]="projectSettings.communication.email" value="email">
        Email
    </label>

    <label class="checkbox-inline">
      <input type="checkbox" name="sms" #sms="ngModel" 
             [(ngModel)]="projectSettings.communication.sms" value="sms">SMS
    </label>

    <label class="checkbox-inline">
      <input type="checkbox" name="phone" #phone="ngModel" 
             [(ngModel)]="projectSettings.communication.phone" value="phone">Phone
    </label>
  </div>
</div>

Если эта форма не отображается, вам следует проверьте ваш ответ на данные, чтобы увидеть, совпадает ли структура данных со структурой вашей модели