Property 'toggle' does not exist on type 'KeyValue<string, any>'.ngtsc(2339)

Issue

I am using Angular 11.1.4 and typscript 4.1.5. I get this error at many points...

I want to group my objects according to the different product types. here is my code :

newPlatDenrees = [];
...

this.newPlatDenrees = this.plat.denrees.reduce((r, a) => {
  r[a.typeProduit] = r[a.typeProduit] || [];
  r[a.typeProduit].push(a);
  return r;
}, Object.create(null));

Then I make a display like this. The problem is that this way is functional but impossible to issue an 'ionic build --prod' command. I keep getting this error...

<ion-item-group *ngFor="let denree of newPlatDenrees | keyvalue; let i = index">
  <ion-item-divider (click)="denree.toggle=!denree.toggle">
      <ion-label>{{denree.key}}</ion-label>
      <ion-icon slot="end" [name]="!denree.toggle ? 'chevron-down-outline' : 'chevron-forward-outline'">
      </ion-icon>
  </ion-item-divider>
  <div *ngIf="!denree.toggle">
     <ion-row *ngFor="let value of denree.value; let i = index ">
         <ion-col class="ion-text-center">{{value.produit}}</ion-col>
         <ion-col class="ion-text-center"> {{value.unite}}</ion-col>
         <ion-col class="ion-text-center"> {{value.quantite}}</ion-col>
      </ion-row>
   </div>
</ion-item-group>

Please help me !

Solution

you can "add" the property "toggle" when reduce

this.newPlatDenrees = this.plat.denrees.reduce((r, a) => {
  a.toggle=false //<--this line
  r[a.typeProduit] = r[a.typeProduit] || [];
  r[a.typeProduit].push(a);
  return r;
}, Object.create(null));

Prior Angular 10, Angular was not so "careful" when we added properties "on fly"

You can also, if your newPlatDenrees is a type of an interface add the property optional toogle to interface

export interface IPlatDenre
{
   ...
   toggle?:boolean;
}
newPlatDenress:IPlatDenre[];

Update the problem was the "keypipe", so we need use

denree.value.toggle=!denree.value.toggle

Answered By - Eliseo