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

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 中无效

原文由 Pablo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

诸如 window 、 typeof 之类的全局变量、枚举或静态方法在模板中不可用。只有组件类和打字稿语言构造的成员可用。

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

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

并像使用它

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

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 示例。在第一种情况下，函数调用将在任何变化检测时触发（例如：单击按钮）。

原文由 Armen Stepanyan 发布，翻译遵循 CC BY-SA 4.0 许可协议