类型“KeyValue<string, any>”上不存在属性“toggle”。ngtsc(2339)

Question

我正在使用 Angular 11.1.4 和 typscript 4.1.5。我在很多地方都收到此错误...

我想根据不同的产品类型对我的对象进行分组。这是我的代码：

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));

然后我做一个这样的显示。问题是这种方式是有效的，但不可能发出“ionic build --prod”命令。 我不断收到此错误...

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

请帮帮我！

Answer 1

你可以在reduce时“添加”属性“toggle”

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));

在 Angular 10 之前，当我们“即时”添加属性时，Angular 并没有那么“小心”

如果您的 newPlatDenrees 是一种接口类型，您也可以将属性 optional toogle 添加到接口

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

更新问题是“keypipe”，所以我们需要使用

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