Question

我有一个对象，我使用ngModel＆amp; amp渲染到表格（内联编辑）。在某些情况下，任何特定值都不可用，以下是示例：

[{
    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>

由于在第二个对象phone2不存在，它给出了一个错误，所以我如何处理它＆amp;因为它是一个内联编辑表，我想在用户输入时添加该phone2。我怎么能做到这一点？

更新：如果不存在属性，则会收到此错误：

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

我认为，好的方法是在ngOnInit()中呈现表之前准备结果数组。

另一种方式：在此代码示例中，我使用临时数组存储用户信息，并在用户的phone2更改时更新原始数组。

 @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

        }
    }

使用ngModel使用额外属性更新对象

1 个答案: