如何在 Angular2 的 ngIf 中檢查變量類型

Question

我正在學習 Angular2。 我有一個變量為 object 的組件。我正在遍歷 object 的字段，並根據 position 的數據類型，我需要呈現不同的組件。 在這種情況下，如果typeof的類型是一個number ，我想渲染label但這不起作用

<div>
  <div *ngIf='obj'>
    <label *ngFor="let key of keys; let i = index">
      <label class='key'>{{key}}:</label>
      <label class='number' *ngIf='typeof obj[key] === "number"'>
      <!-- label class='number' *ngIf='obj[key] | typeof === "number"' -->
        {{ obj[key] }}
      </label>
    </label>
  </div>
</div>

有任何想法嗎？

我還創建了一個typeof來獲取打印值時有效的類型，但不在 *ngIf 內部

Answer 1

模板中不提供window 、 typeof 、 enum 或靜態方法等全局變量。 只有組件類和打字稿語言結構的成員可用。

您可以向組件添加一個輔助方法，例如

isNumber(val): boolean { return typeof val === 'number'; }

並像使用它一樣

<label class='number' *ngIf='isNumber(obj[key])'>

Answer 2

您可以創建簡單的管道，它將接收當前項目並返回項目類型。

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'typeof'
})
export class TypeofPipe implements PipeTransform {

  transform(value: any): any {
    console.log("Pipe works ", typeof value);
    return typeof value;
  }

}

現在你可以像這樣在 html 中使用typeof管道

*ngIf = (item | typeof) === 'number'

如上所述，在 html 中使用函數調用時要小心。 它更喜歡使用管道而不是函數調用。 這是Stackblitz示例。 在第一種情況下，任何更改檢測都會觸發函數調用（例如：單擊按鈕）。

Answer 3

或者，您可以比較構造函數名稱。

{{ foo.constructor.name === 'FooClass' }}

這里有關於這方面的詳細信息。

Answer 4

我剛剛試過這個，發現它在生產中不起作用，因為函數名稱被縮短了。 使用類似的東西更安全：

foo instanceof FooClass

但請注意，您必須在組件/指令中執行此操作，因為instanceOf在模板中不可用：

// In your component
isFoo(candidate){
    return candidate instanceof FooClass;
}

// in your template
{{isFoo(maybeFoo)}}

Answer 5

這有點小技巧，但是如果您需要在很多地方執行此操作並且不想isNumber傳遞一些isNumber函數，那么如果您仔細使用它，還有另一個選項可以工作。

您可以檢查您要查找的對象或類型的prototype上是否存在屬性或方法。 例如，所有數字都有一個toExponential函數，所以：

<label class='number' *ngIf='obj[key] && obj[key].toExponential'>

對於函數，您可以查找call ，對於字符串，您可以查找toLowerCase ，對於數組，您可以查找concat等。

這種方法根本不是萬無一失的，因為您可能有一個object碰巧擁有與您正在檢查的名稱相同的屬性（盡管如果您正在檢查的屬性就是您所需要的，那么我們基本上是鴨子鍵入)，但是如果您知道您擁有的值是一個基元，那么您就處於良好狀態，因為您無法為基元分配屬性（這里有一些關於該主題的有趣閱讀）。

免責聲明：我真的不相信這是一個好主意，可能不是很容易維護或便攜，但如果你只是需要一些快速的原型或非常有限的用例，這是一個合理的工具.

Answer 6

你可以簡單地試試這個

在你的 TS 中設置一個變量

isNumber = isNaN;

在你的模板中

<p>{{isNumber(your value) ? 'do something' : 'else' }}</p>