angular table: binding multiple calendars-CodePudding

I added a calendar on each row of the table , but when I pick a date from calendar component , it also changes all other calendar selected value from other rows:

The issue comes on property "selectedValue:Date" which is binding each calendar in the table. I tried to convert this "selectedValue:Date" property to array of Dates so could index each "SelectedDate" in the table but it also didn't worked.

Typescript:

export class AppComponent {
 selectedDate: Date;
  ...

HTML:

     <td>
        <p-calendar [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true"
          yearRange="2022:2100" appendTo="body" dateFormat="dd/mm/yy"
        [(ngModel)]="selectedDate">
        </p-calendar>
     </td>

here is the source code that I'm tested for better illustration: source code

CodePudding user response：

Since you are using a single property for all the iterated rows. changing the value in one place is reflecting all other places. One approach would be extending the response from the backend to add one more property named date then you can set it from a template like this.

component.ts

this.productService
  .getProductsSmall()
  .then((data) => (this.products = data.map((item)=>({...item,date:''})) 
));

component.html

  <tr>
      <td>{{ product.code }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.category }}</td>
      <td>{{ product.quantity }}</td>
      <td>
        <p-calendar
          [showIcon]="true"
          [monthNavigator]="true"
          [yearNavigator]="true"
          yearRange="2022:2100"
          appendTo="body"
          dateFormat="dd/mm/yy"
          [(ngModel)]="product.date"
        >
        </p-calendar>
      </td>
    </tr>

Working Example