我有一个带有 ion-icon 结尾的 ion-select,这个图标需要根据 ion-select 的展开或闭合状态来改变。
问题:
当 ion-select 展开时,图标能正确变化,但在关闭时不再变化。奇怪的是,当我调试这一行为时,无论打开还是关闭 ion-select,ion-icon 都能正确变化。
<ion-list lines="none">
<ion-list-header class="header">{{'category' | translate }}</ion-list-header>
<ion-item>
<ion-select placeholder="{{'categoryFilter' | translate }}" interface="popover" (ionFocus)="setToggleIcon()" (ionDismiss)="setExpandIcon()">
<ion-select-option *ngFor="let category of [1,2,3]; index as i">Apfel {{i}}</ion-select-option>
</ion-select>
<ion-icon class="toggleIcon" name="{{toggleIcon}}"></ion-icon>
</ion-item>
<hr class="border">
</ion-list>
@Component({
selector: 'app-maintenance-list',
templateUrl: './maintenance-list.component.html',
styleUrls: ['./maintenance-list.component.scss'],
})
export class MaintenanceListComponent implements OnInit {
protected toggleIcon: string = "chevron-down-outline";
constructor() {}
ngOnInit() {}
setToggleIcon(): void {
this.toggleIcon = 'chevron-up-outline';
}
setExpandIcon(){
this.toggleIcon = "chevron-down-outline";
}
}
请帮助我解决这个问题,谢谢!