如何解决当对象属性值被更改时,Angular 将样式更新为 ngFor 中的 div
我使用 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 举报,一经查实,本站将立刻删除。