div *ngIf="is_auto===false" 未显示答案

【问题标题】：div *ngIf="is_auto===false" is not showingdiv *ngIf="is_auto===false" 未显示
【发布时间】：2021-01-22 08:50:03
【问题描述】：

我有两个部分。 When 'Manual' segment is selected, "is not auto" is not showing but instead showing as "is auto" although the value of {{is_auto}} is false

<ion-segment mode="md" [(ngModel)]="is_auto">
    <ion-segment-button mode="md" [value]="true">
        <ion-label>Auto</ion-label>
    </ion-segment-button>
    <ion-segment-button mode="md" [value]="false">
        <ion-label>Manual</ion-label>
    </ion-segment-button>
</ion-segment>

{{is_auto}}
<div *ngIf="is_auto === false">
    is not auto
</div>
<div *ngIf="is_auto">
    is auto
</div>

选择“自动”段时，输出为

是的

是自动的

选择“手动”段时，输出为

假

是自动的

我已经导入了浏览器模块和通用模块。

更新

变量被转换为布尔值，但离子段不断消失将其转换为字符串。 ionic 3 工作正常，但不适用于 ionic 4

已解决

将变量转换为字符串作为离子 4 离子段似乎将所有值作为字符串处理

【问题讨论】：

确保您的 ngIf 表达式在双引号内，例如 *ngIf="is_auto" 而不是单引号 *ngIf='is_auto'
即使改成双引号还是一样
您可以简单地使用 *ngIf="!is_auto" 。还要检查变量以及你得到的值。
*ngIf="!is_auto" 也不起作用，变量 {{is_auto}} 的值返回 true 或 false
@ShamPooSham "确保您的 ngIf 表达式在双引号内" 为什么？

标签： angular ionic-framework ionic4 angular-ng-if

【解决方案1】：

收到的值类型is_auto 是字符串，而不是布尔值。所以将其与字符串进行比较：

<div *ngIf="is_auto === 'false'">
    is not auto
</div>
<div *ngIf="is_auto === 'true'">
    is auto
</div>

【讨论】：

我只是确认收到的值类型 is_auto 是布尔值
typeof is_auto 在构造函数中返回布尔值，但在段更改事件中，typeof is_auto 返回字符串
没错，来自html输入的值类型是字符串，除了输入类型数字之外，它的值类型是数字

【解决方案2】：

trey 下面的代码

html code

<ion-segment mode="md" [(ngModel)]="is_auto">
      <ion-segment-button mode="md" [value]="true">
        <ion-label>Auto</ion-label>
      </ion-segment-button>
      <ion-segment-button mode="md" [value]="false">
        <ion-label>Manual</ion-label>
      </ion-segment-button>
    </ion-segment>

    {{is_auto}}
    <div *ngIf="is_auto === 'false'">
      is not auto
    </div>
    <div *ngIf="is_auto === 'true'">
      is auto
    </div>

ts code

公共 is_auto;

【讨论】：

【解决方案3】：

<div *ngIf="is_auto;else elsepart">
    this is true part
</div>

<ng-template #elsepart> 
   ---- this is false part
</ng-template>

【讨论】：

两种方式都可以，这解决不了OP的问题
必须声明 is_auto:boolean = false;
请在您的答案中添加一些解释，以便其他人可以从中学习
typeof is_auto 在构造函数中返回布尔值，但在段更改事件中，typeof is_auto 返回字符串

【解决方案4】：

因为ion-segment 会将您的值字符串化，所以您必须以某种方式处理它。你可以解析is_auto，但我认为更好的解决方案是使用联合类型变量，如下所示：

打字稿：

mode: "auto" | "manual";

HTML：

<ion-segment mode="md" [(ngModel)]="mode">
    <ion-segment-button mode="md" value="auto">
        <ion-label>Auto</ion-label>
    </ion-segment-button>
    <ion-segment-button mode="md" value="manual">
        <ion-label>Manual</ion-label>
    </ion-segment-button>
</ion-segment>

<div *ngIf="mode === 'auto'">
    is auto
</div>
<div *ngIf="mode === 'manual'">
    is not auto
</div>

【讨论】：

【解决方案5】：

使用引号“”代替单引号。

你也可以使用 !is_auto

<div *ngIf="!is_auto">
    is not auto
</div>
<div *ngIf="is_auto">
    is auto
</div>

Stackbitz example

【讨论】：

【解决方案6】：

不要使用布尔值。

<ion-segment mode="md" [(ngModel)]="is_auto">
  <ion-segment-button mode="md" value="first">
      <ion-label>Auto</ion-label>
  </ion-segment-button>
  <ion-segment-button mode="md" value="last">
      <ion-label>Manual</ion-label>
  </ion-segment-button>
</ion-segment>

  {{is_auto}}
<div *ngIf="is_auto == 'first'">
  is not auto
</div>
<div *ngIf="is_auto == 'last'">
  is auto
</div>

【讨论】：