如何在角度数据类型上使用ngSwitch?

时间:2016-06-24 12:49:59

标签: angular typescript instanceof typeof ng-switch

我正在使用angular2,并且很想知道当变量具有某种datatype.i.e时是否可以使用ngSwitch加载<div>标记。 像这样的东西:

 <div [ng-switch]="value">
  <p *ng-switch-when="isObject(value)">This is Object</p>
  <p *ng-switch-when="isArray(value)">This is Array</p>
  <p *ng-switch-when="isBoolean(value)">This is Boolean</p>
  <p *ng-switch-when="isNumber(value)">This is Number</p>
  <p *ng-switch-default>This is Simple Text !</p>
</div>

当变量具有特定数据类型时,是否可以加载div标记? 如果没有,任何解决方法吗?

2 个答案:

答案 0 :(得分:2)

是的,您可以直接在模板中执行此操作。只需在控制器中创建一个方法来检查类型:

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div [ngSwitch]="checkType(name)">
        <p *ngSwitchCase="'string'">is a string!</p>
        <p *ngSwitchDefault>default</p>
      </div>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  checkType(value) {
    return typeof value
  }
}

Working Plunker

请先将Angular更新为RC版本。

答案 1 :(得分:1)

另一种方法是使用ngIf

  <p *ngIf="isObject(value)">This is Object</p>
  <p *ngIf="isArray(value)">This is Array</p>
  <p *ngIf="isBoolean(value)">This is Boolean</p>
  <p *ngIf="isNumber(value)">This is Number</p>
  <p *ngIf="!isObject(value) || !isArray(value) || !isBoolean(value) || !isNumber(value)">This is Simple Text !</p>