проверить тип переменной в HTML

Question

В моем классе просмотра я отображаю некоторые данные, получаю переменную и хочу проверить, что если тип переменной - логический, то я хочу показать для нее кнопку переключения, но если тип - число, то яхочу показать слайдер для него.

<div *ngFor="let attribute of agent.attributes; let i = index">
      <div class="row">
        <div class="col s2">
          <mat-card>
            <mat-card-header>
              <mat-card-title>{{agent.attributes[i].name}}</mat-card-title>
            </mat-card-header>
            <mat-card-content>
              <div class="center">{{agent.attributes[i].value}}</div>
              <!-- for this value i want to check the type for it, if it is boolean then 
              a switch button should show and if type is number than a slider show be shown -->
            </mat-card-content>
            <mat-card-actions>
              <button mat-button>SAVE</button>
            </mat-card-actions>
          </mat-card>
        </div>
      </div>
    </div>

Answer 1

Напишите простой typeOf метод для проверки типа:

ts:

typeOf(value) {
  return typeof value;
}

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

<div *ngIf="typeOf(var1) === 'boolean'">switch button</div>
<div *ngIf="typeOf(var1) === 'number'">slider</div>

---

Вот Рабочий образец StackBlitz для вашего исх.

Answer 2

Вы можете использовать typeof и поместить его в ngIf

typeof i === "number"

и

typeof i === "boolean"