当对象属性值被更改时，Angular 将样式更新为 ngFor 中的 div

编程问答 2022-05-15

问题描述

我使用 ngFor 显示一个列表项，如下所示

<div class="calendar-list">
 <div class='calendar-list-item' *ngFor="let list of calendarList; let i=index; first as isFirst"
   (click)="select(i)" [ngClass]="i == selectedindex ? 'active' : 'none'"  >
<div class="calendar-name"  [ngClass]=" list.selected ? 'calendar-opended' : 'none'"  >
  {{list.calendarName}}
</div>
<div>
  <button mat-icon-button [matMenuTriggerFor]="calendarMenu.menu" class="icon-more" [matMenuTriggerData]="list">
    <mat-icon>more_vert</mat-icon>
  </button>
  <app-calendar-menu #calendarMenu="matMenuComponent" [calendarId]='list.id' [isFromHeader]="false"
                     (isOpened)="onCalenderOpened($event)"
                     (isDeleted)="onCalenderDeleted($event)"

  ></app-calendar-menu>

</div>

点击每个项目时，我会显示带有打开/删除等选项的垫子菜单。 单击删除时，我将删除数组 claendarList 中的对象。并将第一个对象属性 selected 值设置为 true 以显示所选 true 属性对象的一些样式。 但它没有更新视图中的更改。 怎么做 ？我已经尝试过 trackBy 选项，但它不起作用。

 onCalenderDeleted(calendarId) {
console.log('on deleted called');
const prevIoUsOpenedCal = this.getPrevIoUsSelected();
this.prevIoUsCalenderId = prevIoUsOpenedCal.id;
this.getCalendarList();
if (this.prevIoUsCalenderId !== calendarId) {
  return;
}
prevIoUsOpenedCal.selected = false;
const index = this.calendarList.find(item => item.id === '0');
if (index) {
  this.calendarService.changeCalendarId('0');
  index.selected = true;
}

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-ngmodeljavascript