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>

这是您推荐的Working Sample StackBlitz。

Answer 2

您可以使用typeof，然后将其放入ngIf

typeof i === "number"

和

typeof i === "boolean"

检查HTML中变量的类型

2 个答案: