如何為 Nullable 3d Json 數據動態設置和獲取 NgModel

Question

i'm trying to get/set value into Html input using [(ngModel)] Evrything works fine with my 2d Json level, or even 3d Json level IF my object already exsiting in my json. 但是，當我的 3d object 是 NULL 時，我不能再使用雙重綁定了。 所以我將我的 NgModel （ [ngModel] 讀取和 (ngModelChange) 設置）分開，這是我的問題，我無法設置未定義的 object。 因為我的3d object的結構不存在。

我試圖用我的子 Model 屬性創建一個 Model，但即使我的 Model 他無法設置我的屬性。

• 這是我的 WebApi 的回復：

"Data": {
    "Entreprise": {
      "PostalAddressSameAsCorrespondence": false,
      "ID_Entreprise": 3374,
      "Prefixe": null,
      "Suffixe": null,
      "ID_EntrepriseParent": null,
      "ID_EntrepriseParentIcriq": null,
      "TypeEntrepriseLookup": "ENSE",
      "EntrepriseSaisonniere": "N",
      ...
      "TelephonePrincipal": {
        "ID_Telephone": 716,
        "ID_Entreprise": 374,
        "ID_Contact": null,
        "TypeTelephoneLookup": "PRI",
        "NumeroTelephone": "999-328-4200",
        "Poste": null,
        "DateCreation": "2017-03-29T15:27:04",
        "CodeUsagerCreation": "ASDQQ",
        "DateModification": null,
        "CodeUsagerModification": null
      },
      "TelephoneSecondaire": null
}

• 這就是我在 2d 級別讀取和設置值的方式

<div class="md-form">
                  <input type="text" id="nomLegalFrancais" class="form-control" mdbInput mdbValidate
                    [(ngModel)]="entrepriseModel.NomLegalFrancais" formControlName="nomLegalFrancais">
                  <label for="nomLegalFrancais">Nom légal français *</label>
                  <mdb-error *ngIf="nomLegalFrancais.invalid && (nomLegalFrancais.dirty || nomLegalFrancais.touched)">
                    Entrée invalide</mdb-error>
                  <mdb-success *ngIf="nomLegalFrancais.valid && (nomLegalFrancais.dirty || nomLegalFrancais.touched)">
                    Entrée valide</mdb-success>
                </div>

• 這就是我嘗試在 3d 級別讀取和設置值的方式（例如 TelephoneSecondaire）

<!-- Telephone sans frais -->
                  <div class="col-md-6 col-sm-6">
                    <div class="md-form form-group">
                      <input id="telephoneSansFrais" mdbInput mdbValidate type="text" class="form-control"
                        [ngModel]="entrepriseModel?.TelephoneSansFrais?.NumeroTelephone"
                        (ngModelChange)="entrepriseModel.TelephoneSansFrais?.NumeroTelephone = $event"
                        [textMask]="{mask: phoneSansFraisMask}" formControlName="telephoneSansFrais"> <!-- Setter (ngModelChange) NOT WORKING -->
                      <label for="telephoneSansFrais">Téléphone sans frais</label>
                    </div>
                  </div>

• 企業.model.ts：

export class Entreprise {

  public ID_Entreprise: number;
  public Prefixe: string;
  public Suffixe: string;
  public ID_EntrepriseParent: number;
  public ID_EntrepriseParentIcriq: number;
  public NomLegalFrancais: string;
  ...
  public TelephonePrincipal: Telephone;
  public TelephoneSansFrais: Telephone; 

  deserialize(input: any): this {
    Object.assign(this, input.Data.Entreprise);
    return this;
  }
}

export class Telephone implements {
  public ID_Telephone: number;
  public ID_Entreprise: number;
  public ID_Contact: number;
  public TypeTelephoneLookup: string;
  public NumeroTelephone: string;
  public Poste: string;
  public DateCreation: string;
  public CodeUsagerCreation: string;
  public DateModification: string;
  public CodeUsagerModification: string; 
}

我希望得到這樣的 json：

使用動態對象：

"Data": {
    "Entreprise": {
      "PostalAddressSameAsCorrespondence": false,
      "ID_Entreprise": 3374,
      "Prefixe": null,
      "Suffixe": null,
      "ID_EntrepriseParent": null,
      "ID_EntrepriseParentIcriq": null,
      "TypeEntrepriseLookup": "ENSE",
      "EntrepriseSaisonniere": "N",
      ...
      "TelephonePrincipal": {
        "ID_Telephone": 716,
        "ID_Entreprise": 374,
        "ID_Contact": null,
        "TypeTelephoneLookup": "PRI",
        "NumeroTelephone": "999-328-4200",
        "Poste": null,
        "DateCreation": "2017-03-29T15:27:04",
        "CodeUsagerCreation": "ASDQQ",
        "DateModification": null,
        "CodeUsagerModification": null
      },
      "TelephoneSecondaire": {
        "NumeroTelephone": "123-465-999", <!-- my input id="telephoneSansFrais" value -->
      }
}

或者，如果我使用的是 Class “電話”：

"Data": {
    "Entreprise": {
      "PostalAddressSameAsCorrespondence": false,
      "ID_Entreprise": 3374,
      "Prefixe": null,
      "Suffixe": null,
      "ID_EntrepriseParent": null,
      "ID_EntrepriseParentIcriq": null,
      "TypeEntrepriseLookup": "ENSE",
      "EntrepriseSaisonniere": "N",
      ...
      "TelephonePrincipal": {
        "ID_Telephone": 716,
        "ID_Entreprise": 374,
        "ID_Contact": null,
        "TypeTelephoneLookup": "PRI",
        "NumeroTelephone": "999-328-4200",
        "Poste": null,
        "DateCreation": "2017-03-29T15:27:04",
        "CodeUsagerCreation": "ASDQQ",
        "DateModification": null,
        "CodeUsagerModification": null
      },
      "TelephoneSecondaire": {
        "ID_Telephone": null,
        "ID_Entreprise": null,
        "ID_Contact": null,
        "TypeTelephoneLookup": null,
        "NumeroTelephone": "123-465-999", <!-- my input id="telephoneSansFrais" value -->
        "Poste": null,
        "DateCreation": null,
        "CodeUsagerCreation": null,
        "DateModification": null,
        "CodeUsagerModification": null
      },
}