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

Question

我有两个片段。当选择"手动"段时，";"不是"自动";不是显示而是显示为"是自动"虽然{{is_auto}}的值为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>

选择Auto段时，输出为

真正

是汽车

选择"手动"段时，输出为

错误

是汽车

我导入了Browser Module和Common Module.

该变量被强制转换为布尔值，但离子段一直在消失将其转换为字符串。离子3很好，但不适合离子4

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

Answer 1

is_auto接收到的值类型是字符串，不是布尔值。所以将它与string比较:

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

Answer 2

<div *ngIf="is_auto;else elsepart">
this is true part
</div>
<ng-template #elsepart> 
---- this is false part
</ng-template>

Answer 3

因为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>

Answer 4

下面的代码

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;

Answer 5

使用引号"代替单引号。

也可以使用!is_auto

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

Stackbitz例子

Answer 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>