Как присвоить значение массиву, используя ngModel в Angular

Question

Я создаю следующую форму:

Я хочу добавить еще один вход, это мои model.ts:

export class ScheduleConfig {
    id: number;
    hourOfSave: string;
    numDaysInDB: number;
}

export class EmailConfig {
    id: number;
    succesEmail: string;
    failureEmail: string;
}

export class DBconnection {
    id: number;
    serverType: string;
    serverName: string;
    port: string;
    authType: string;
    userName: string;
    password: string;
    dbName: string;
    folderName: string;
    scheduleConfig: ScheduleConfig[];
    emailConfig: EmailConfig[];
}

И это component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MessageService, SelectItem } from 'primeng/api';
import { DBconnection, EmailConfig } from 'src/app/models/db-connection';
import { DbConnectionService } from 'src/app/services/db-connection.service';

@Component({
  selector: 'app-db-connections',
  templateUrl: './db-connections.component.html',
  styleUrls: ['./db-connections.component.css']
})
export class DbConnectionsComponent implements OnInit {
  dbConnectionForm: FormGroup;
  dbConn = new DBconnection();
  dbConns: DBconnection[] = [];
  submitted: boolean;
  OldValueConn: DBconnection;

  constructor(
    private fb: FormBuilder,
    private messageService: MessageService,
    private dbConnService: DbConnectionService
  ) {}

  async ngOnInit() {
    this.dbConns = await this.dbConnService.getAllConnDB().toPromise();
    // console.log('cons:', this.dbConns);
  }

  onSubmit() {
    this.submitted = true;
    if (this.dbConn.id) {
      this.dbConnService.getConnDB(this.dbConn.id).subscribe(res => {
        this.OldValueConn = res;
        this.dbConnService.updateConnDB(this.dbConn).subscribe(() => {
          this.messageService.add({
            severity: 'info',
            summary: 'Success',
            detail: `BD ${this.dbConn.dbName} mise à jour!`,
            sticky: false
          });
        });
      });
    } else {
      this.dbConnService.addConnDB(this.dbConn).subscribe(async result => {
        this.messageService.add({
          severity: 'info',
          summary: 'Success',
          detail: `BD ${result.dbName} créee`,
          sticky: false
        });
        this.dbConns = await this.dbConnService.getAllConnDB().toPromise();
      });
    }
  }

  onDelete(id: number) {
    this.dbConnService.deleteConnDB(id).subscribe(async result => {
      this.messageService.add({
        severity: 'info',
        summary: 'Success',
        detail: `BD ${result.dbName} supprimé`,
        sticky: true
      });
      this.dbConns = await this.dbConnService.getAllConnDB().toPromise();
    });
  }

  SelectBD(SelectedDbConn) {
    this.dbConn = SelectedDbConn;
  }
}

Когда я добавляю pInputText, я могу получить emailSucces, как это в. html:

<div class="ui-grid-row">
            <div class="ui-grid-col-2" style="width: 150px;">
              Email de succes *:
            </div>
            <div class="ui-grid-col-6">
              <input
                pInputText
                type="text"
                id="succesMail"
                name="succesMail"
                required="required"
                placeholder="Requis"
                #succesMail="ngModel"
                [(ngModel)]="dbConn.emailConfig[0].succesEmail"
              />
            </div>
            <div class="ui-grid-col-4">
              <p-message
                severity="error"
                [text]="
                succesMail.errors.required
                    ? 'L\'email de succes est requis'
                    : ''
                "
                *ngIf="!succesMail.valid && succesMail.dirty"
              ></p-message>
            </div>
          </div>

Это дает мне эту ошибку в консоли:

Как передать значение первому элементу массива (EmailConfig [])? Я провел некоторые исследования, и я думаю, что это вызвано тем, что ngModel пытается прочитать с незащищенного объекта. Я пытался сделать это: [(ngModel)]="dbConn.emailConfig[0]?.succesEmail Пар, это не работает: /

Любая помощь будет оценена, спасибо! :)

РЕДАКТИРОВАТЬ:

Вот что я из базы данных, и я отображаю это на столе (моя модель работает нормально, я думаю):

И когда я могу console.log, я получаю это:

Answer 1

Так что я не спал всю ночь, чтобы исправить это, вот решение: в моем mode.ts мне пришлось инициализировать массив следующим образом: emailConfig: EmailConfig[]=[]; И в <div> в компоненте. html Мне пришлось l oop закончено с *ngFor вот так:

<div class="ui-grid-col-2" style="width: 150px;">
              Email de succes *:
            </div>
            <div class="ui-grid-col-6" *ngFor="let email of dbConn.emailConfig">
              <input
                pInputText
                type="text"
                id="succesMail{{email}}"
                name="succesMail"
                required="required"
                placeholder="Requis"
                #succesMail="ngModel"
                [(ngModel)]="email.succesEmail"
              />
            </div>

Теперь это не дает никакой ошибки: D, спасибо всем за то, что поделились своими знаниями и помогли:)