Question

我正在学习Angular2。我有一个带有变量的组件，它是一个对象。我正在迭代对象的字段，并根据该位置的数据类型，我需要渲染一个不同的组件。在这种情况下，如果label该位置为typeof，我想要number如果这不起作用

<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，枚举或静态方法等全局变量。只有组件类和打字稿语言结构的成员可用。

您可以向组件添加辅助方法，例如

isNumber(val) { 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中使用typeofpipe

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

在HTML as mentioned above中使用函数调用时要小心。首选使用管道代替函数调用。这是Stackblitz的示例。在第一种情况下，将在检测到任何更改时触发函数调用（例如单击按钮）。

Answer 3

或者，您可以比较构造函数名称。

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

有关此here的详细信息。

Answer 4

这有点像黑客攻击，但是如果你需要在很多地方做到这一点并且不想要通过一些isNumber功能，那么还有其他选择如果你仔细使用它可以工作。

您可以检查对象prototype上存在的属性或方法是否存在，或者您要查找的类型。例如，所有数字都有toExponential函数，所以：

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

对于函数，您可以查找call，查找可以查找toLowerCase的字符串，查找可以查找concat的数组等等。

这种做法根本不是万无一失的，因为你可能有一个object碰巧拥有一个与你要检查的同名的财产（尽管这个属性是你的＆＃39;你需要重新检查，然后我们基本上duck typing），但是如果你知道你拥有的价值是一个原始的，你就会处于良好的状态，因为你无法分配原语的属性（这个主题是some interesting reading）。

免责声明：我不相信这是一个好主意，并且可能不是非常易于维护或移植，但如果您只需要快速的原型或非常有限的用例，这是一个合理的工具在你的腰带。

Answer 5

我刚试过这个，发现它在生产中不起作用，因为缩短了函数名。使用类似的东西会更安全：

foo instanceof FooClass

但请注意，您必须在组件/指令中执行此操作，因为instanceOf在模板中不可用：

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

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

如何在Angular2中检查ngIf中的变量类型

5 个答案: