如何使用 Angular 中的 ngModel 为数组赋值

Question

我正在创建以下表单：

我想添加另一个 Input，这是我的 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 时，我可以在 .html 中获得这样的 emailSucces：

<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 par 它不起作用：/

任何帮助将不胜感激，谢谢！ :)

编辑：

这是我从数据库中获取的内容，并将其显示在表格上（我猜我的模型工作正常）：

当我可以 console.log 我得到这个：

Answer 1

所以我彻夜未眠来修复它，这是解决方案： 在我的 mode.ts 中，我必须像这样初始化数组：emailConfig: EmailConfig[]=[]; 在 component.html 中的<div> 中，我不得不像这样循环使用*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，感谢大家分享您的知识和帮助:)