如何在 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>