Ionic 7 与 Angular 在调试器运行时仅进行 UI 更改

Question

我有一个离子选择，其末尾应包含一个离子图标。图标应根据离子选择是打开还是关闭而变化。 问题： 当离子选择打开时，我的图标会正确更改，但当离子选择关闭时，图标不再正确更改。奇怪的是，当我调试行为时，离子图标在关闭和打开时都会正确更改。

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

谢谢您的帮助

Answer 1

好的，下面是我注意到的两件事。

1. 属性``受到保护，但它应该是公共的，因为它在HTML中使用并且需要在类之外使用！

2. 您可以尝试使用

   ionBlur

   代替

   ionDismiss

   ，当我更改后，它开始正常工作！

离子选择文档

html

<ion-list lines="none">
  <ion-list-header class="header">{{ 'category' }}</ion-list-header>
  <ion-item tabindex="1">
    <ion-select
      placeholder="{{ 'categoryFilter' }}"
      interface="popover"
      (ionFocus)="setToggleIcon()"
      (ionBlur)="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>

ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public toggleIcon: string = 'chevron-down-outline';
  constructor() {}
  ngOnInit() {}

  setToggleIcon(): void {
    this.toggleIcon = 'chevron-up-outline';
  }

  setExpandIcon() {
    this.toggleIcon = 'chevron-down-outline';
  }
}

堆栈闪电战