属性 'toggle' 在类型 'KeyValue<string, any>' 上不存在 'KeyValue<string, any>'.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

~~您可以在减少~~

时“添加”属性“切换”
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 是一种接口，您也可以将属性可选工具添加到接口

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

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

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

属性 'toggle' 在类型 'KeyValue<string, any>' 上不存在 'KeyValue<string, any>'.ngtsc(2339)

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

typescript

ionic-framework

angular

ionic5

angular11