Angular modular object property binding to ngModel-CodePudding

I have an object with 1 set properties and X modular ones which are added depending on at array, the array elements are the object names. This works perfectly to display the elements in my table. My issue comes when I want to bind the textboxes to my model, as I am getting an error saying the object properties does not exist. I have included an *ngIf to check if the property is there and in theory it finds it.

This is part of my HTMl code trying to use one of the modular property names, I have used one which I know will exists to simplify the debugging, next step will be to change this to be fully modular:

<ng-container *ngIf="newWaste[0].hasOwnProperty('Metal')">
 <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns  | slice:2 let i = index">
  <th mat-header-cell *matHeaderCellDef>{{ displayedColumns[i 2] }}</th>
  <td mat-cell *matCellDef="let emp">
   <input type="text"  matInput placeholder="" value="{{ emp[column] }}" [(ngModel)]="newWaste[0].Metal" />
  </td>
 </ng-container>
</ng-container>

I have also tried counting the number of properties instead of directly checking if it exists, no difference neither.

This is my error:

src/app/pages/waste/containers/waste-page/waste-page.component.html:33:132 - error TS2339: Property 'Metal' does not exist on type '{ measuredDate: Date; }'.

33                                     <input type="text"  matInput placeholder="" value="{{ emp[column] }}" [(ngModel)]="newWaste[0].Metal" />
                                                                                                                                      ~~~~~

  src/app/pages/waste/containers/waste-page/waste-page.component.ts:19:16
    19   templateUrl: './waste-page.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component WastePageComponent.

I create the object with Date parameters, the rest added later. Binding to Date works perfectly.

Any suggestions?

CodePudding user response：

I create the object with Date parameters, the rest added later

Here's the problem. Initialize newWaste with Metal property already there (no problem if it's initialized to undefined), and probably adjust the TS typing of newWaste so Metal property is non-optional. Angular objects to ngModel pointing at a property which potentially doesn't exist.

CodePudding user response：

Thinking about the whole initialization issue, I have tried to initialize an empty array, instead of an array with the object including the "measuredDate" property.

So instead of this:

public newWaste = [{measuredDate: Date}];

I am just using this, and add all properties in the code:

public newWaste = [];

ngOnInit(): void {
    //add the measureDate property
    this.newWaste.push({measuredDate: new Date()});
    //in other methods I add the more specific properties such as Metal
}

It workpes perfectly the way like that.