Как установить условие значения NaN, чтобы показать / скрыть представление, используя ngIf | угловой 6 - PullRequest
Новая
       27

Как установить условие значения NaN, чтобы показать / скрыть представление, используя ngIf | угловой 6

0 голосов
/ 09 ноября 2018

Я хочу скрыть метку, когда значение равно NAN с использованием *ngIf*, но оно не работает.

Помеченная метка является значением переменной по умолчанию, после заполнения ввода значением будет число Я хочу показать метку только тогда, когда значение не NAN

Что пытались 

     // undefined
    <mat-hint *ngIf="this.cost_liter !== 'undefined'" >cost/liter: {{this.cost_liter}}</mat-hint>
   // 'undefined'
    <mat-hint *ngIf="this.cost_liter !== 'undefined'" >cost/liter: {{this.cost_liter}}</mat-hint>
    //!=
    <mat-hint *ngIf="this.cost_liter != undefined" >cost/liter: {{this.cost_liter}}</mat-hint>
    //!== NAN
    <mat-hint *ngIf="this.cost_liter !== NAN" >cost/liter: {{this.cost_liter}}</mat-hint>
     //!= NAN
  <mat-hint *ngIf="this.cost_liter != NAN" >cost/liter: {{this.cost_liter}}</mat-hint>
     //!== null
   <mat-hint *ngIf="this.cost_liter !== null" >cost/liter: {{this.cost_liter}}</mat-hint>
    // != null
   <mat-hint *ngIf="this.cost_liter != null" >cost/liter: {{this.cost_liter}}</mat-hint>

я уверен, что ngIf работает, так как я установил условие, если значение больше 0. и оно работает, но все же не моя потребность 

    // > 0
   <mat-hint *ngIf="this.cost_liter != null" >cost/liter: {{this.cost_liter}}</mat-hint>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Поскольку метод isNan не известен в вашем шаблоне, вы можете объявить его в компоненте: 

isNaN: Function = Number.isNaN;

тогда в вашем шаблоне назовите это так: 

<mat-hint *ngIf="!isNAN(this.cost_liter)" >cost/liter: {{this.cost_liter}}</mat-hint>

С уважением,

0 голосов
/ 09 ноября 2018

Вы можете использовать метод JavaScript isNAN(this.cost_liter) для проверки или вы можете использовать Number.isNaN().

Использование if (Number.isNaN(this.cost_liter))

Оба метода возвращают true или false и возвращают false, если значение равно нулю.

Вот как вы делаете: 

<mat-hint *ngIf="!Number.isNaN(this.cost_liter)" >cost/liter: {{this.cost_liter}}</mat-hint>

Или вы можете определить метод в компоненте и вызывать его каждый раз, когда вам это нужно. 

isNumber(value) {
  return Number.isNaN(value);
}

И использовать в шаблоне: 

<mat-hint *ngIf="!isNumber(this.cost_liter)" >cost/liter: {{this.cost_liter}}</mat-hint>
...