Update-Objekt mit zusätzlichem Attribute ngModel

Question

Ich habe ein Objekt, das ich zu Tisch Rendering bin (inline-edit) mit ngModel & gibt es einige Fälle, in denen ein bestimmten Wert nicht verfügbar sein wird, ist unten das Beispiel:

[{ 
    results: [ 
     { 
      name: 'abc', 
      phone1: '98888', 
      phone2: '988883' 
     }, 
     { 
      name: 'xyz', 
      phone1: '98888' 
     } 
    ] 
}] 

<tr *ngFor="let contact of results"> 
    <td><input type="text" name="username" [(ngModel)]="contact.name"></td> 
    <td><input type="text" name="phone1" [(ngModel)]="contact.phone1"></td> 
    <td><input type="text" name="phone2" [(ngModel)]="contact.phone2"></td> 
</tr> 

Da im zweiten Objekt phone2 nicht vorhanden ist, gibt es einen Fehler so, wie ich damit umgehen kann & seit seiner Inline-Edit-Tabelle, möchte ich das phone2 hinzufügen, wenn Benutzer es eingibt. Wie kann ich das erreichen?

Update: Wenn die Eigenschaft nicht vorhanden ist, immer diese Fehlermeldung:

EXCEPTION: Error in ./Spreadsheet class Spreadsheet - inline template:83:85 
ORIGINAL EXCEPTION: TypeError: Cannot read property '0' of undefined 
ORIGINAL STACKTRACE: 
TypeError: Cannot read property '0' of undefined 
    at DebugAppView._View_Spreadsheet6.detectChangesInternal (Spreadsheet.template.js:1233) 
    at DebugAppView.AppView.detectChanges (view.js:234) 
    at DebugAppView.detectChanges (view.js:339) 
    at DebugAppView.AppView.detectContentChildrenChanges (view.js:252) 
    at DebugAppView._View_Spreadsheet0.detectChangesInternal (Spreadsheet.template.js:557) 
    at DebugAppView.AppView.detectChanges (view.js:234) 
    at DebugAppView.detectChanges (view.js:339) 
    at DebugAppView.AppView.detectViewChildrenChanges (view.js:260) 
    at DebugAppView._View_Spreadsheet_Host0.detectChangesInternal (Spreadsheet_Host.template.js:36) 
    at DebugAppView.AppView.detectChanges (view.js:234) 
    ERROR CONTEXT: 
DebugContext {_view: _View_Spreadsheet6, _nodeIndex: 53, _tplRow: 83, _tplCol: 85} 
Uncaught EXCEPTION: Error in ./Spreadsheet class Spreadsheet - inline template:83:85 
ORIGINAL EXCEPTION: TypeError: Cannot read property '0' of undefined 
ORIGINAL STACKTRACE: 
TypeError: Cannot read property '0' of undefined 
    at DebugAppView._View_Spreadsheet6.detectChangesInternal (Spreadsheet.template.js:1233:59) 
    at DebugAppView.AppView.detectChanges (http://127.0.0.1:8000/static/v4/beta/dist/vendor.bundle.js:47431:15) 
    at DebugAppView.detectChanges (http://127.0.0.1:8000/static/v4/beta/dist/vendor.bundle.js:47536:45) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://127.0.0.1:8000/static/v4/beta/dist/vendor.bundle.js:47449:20) 
    at DebugAppView._View_Spreadsheet0.detectChangesInternal (Spreadsheet.template.js:557:8) 
    at DebugAppView.AppView.detectChanges (http://127.0.0.1:8000/static/v4/beta/dist/vendor.bundle.js:47431:15) 
    at DebugAppView.detectChanges (http://127.0.0.1:8000/static/v4/beta/dist/vendor.bundle.js:47536:45) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://127.0.0.1:8000/static/v4/beta/dist/vendor.bundle.js:47457:20) 
    at DebugAppView._View_Spreadsheet_Host0.detectChangesInternal (Spreadsheet_Host.template.js:36:8) 
    at DebugAppView.AppView.detectChanges (http://127.0.0.1:8000/static/v4/beta/dist/vendor.bundle.js:47431:15) 
ERROR CONTEXT: 
[object Object] 

Answer 1

denke ich, ist die gute Möglichkeit, Ergebnisse Array vorzubereiten, bevor in ngOnInit() Tisch zu machen.

Ein anderer Weg: In diesem Codebeispiel verwende ich temp-Array, um Benutzerinformationen zu speichern und das ursprüngliche Array zu aktualisieren, wenn Benutzer phone2 ändert.

@Component({ 
     selector: 'my-app', 
     template: ` 
    <table><tr *ngFor="let contact of results; let i=index"> 
     <td><input type="text" name="username" [(ngModel)]="contact.name"></td> 
     <td><input type="text" name="phone1" [(ngModel)]="contact.phone1"></td> 
     <td><input type="text" name="phone2" [(ngModel)]="tempUsers[i].phone2" (ngModelChange)="updateResults(i)" ></td> 
    </tr></table>` 
    }) 
    export class AppComponent { 

     public results = [ 
      { 
       name: 'abc', 
       phone1: '98888', 
       phone2: '988883' 
      }, 
      { 
       name: 'xyz', 
       phone1: '98888' 
      } 
     ]; 

     public tempUsers : [{ 
      name: string, 
      phone1: string, 
      phone2: string 
     }] = []; 

     ngOnInit() { 
      let counter = 0; 
      for(let ind in this.results) { 

      this.tempUsers[ind] = { 
       name: this.results[ind].name || '', 
      phone1: this.results[ind].phone1 || '', 
      phone2: this.results[ind].phone2 || '' 
      }; 
      } 
     } 

     updateResults(index: number) { 
      // copy tempUsers objects to results 
      // use object`s index to copy only one object 

     } 
    }