ionic cordova 和 Angular 项目 ng-如果不工作

Question

项目规格： 离子科尔多瓦 离子7 角度 18.0.3

*ng如果不起作用。

page.html

<ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
    <ion-segment-button value="right">
        <ion-label>Right</ion-label>
    </ion-segment-button>
    <ion-segment-button value="missing">
        <ion-label>Missing</ion-label>
    </ion-segment-button>
    <ion-segment-button value="damaged">
        <ion-label>Damaged</ion-label>
    </ion-segment-button>
</ion-segment>

<div *ngIf="segment == 'right'">
    Right
  </div>

  <div *ngIf="segment == 'missing'">
    Missing
  </div>

  <div *ngIf="segment == 'damaged'">
    Damaged
  </div>

page.ts：

segment = "right";

typeChange(event) {
    console.log(this.segment);
}

以上是我的代码。

预期产量

实际产量 请帮我找到解决方案。

谢谢你

Answer 1

请在page.ts中尝试以下代码：

segment: string = 'right';  // Default to 'right'
    
    typeChange(event: any) {
        this.segment = event.detail.value;  // Update segment value on change
        console.log(this.segment);  // Log for debugging
    }

使用严格相等运算符 (===) 而不是 ==。

<ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
  <ion-segment-button value="right">
    <ion-label>Right</ion-label>
  </ion-segment-button>
  <ion-segment-button value="missing">
    <ion-label>Missing</ion-label>
  </ion-segment-button>
  <ion-segment-button value="damaged">
    <ion-label>Damaged</ion-label>
  </ion-segment-button>
</ion-segment>

<div *ngIf="segment === 'right'">
  Right
</div>

<div *ngIf="segment === 'missing'">
  Missing
</div>

<div *ngIf="segment === 'damaged'">
  Damaged
</div>