Angular modular object property binding to ngModel

Question

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?

Answer 1

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.