Question

我正在使用Angular 2 beta和Typescript（"gulp-typescript": "~2.12.1",）。

我正在为<div qz-badge num-stars="3" class="qz-badge"></div>

编写一个组件

import {Component, Input, ElementRef} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';

@Component({
  selector: '[qz-badge]',
  directives: [CORE_DIRECTIVES],
  template: `
    <div class="stars">
    </div>
  `
})
export class Badge {
  @Input('num-stars') numStars: number;

  constructor() {
    console.log(new Array(3));
  }
  ngOnInit() {
    let num = this.numStars;
    console.log(num);

    console.log('--------');
    this.stars = new Array(num);
    console.log(this.stars);
    console.log(this.stars.length);

    num = 3;
    console.log('--------');
    this.stars = new Array(num);
    console.log(this.stars);
    console.log(this.stars.length);
  }
}

它导致..

3
--------
["3"]
1
--------
[]
3

在规范中，

语法

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array）

我认为长度应为3。这是一个错误还是有一些正当的理由？

Answer 1

实际上它不是一个bug，只是因为它有效。所有@Input()都以字符串形式传递。正如Rob Wormald在此issue所说的那样。

TS中的类型纯粹是编译时构造

因此，即使您将number指定为输入类型，也不会在运行时使用数字，而是使用字符串。所以你可以使用parseInt来投射它。

// this.numStars is a string, not a number
let num = parseInt(this.numStars);

这将使它正常工作。

这是一个plnkr，您的案例正在运作。

修改

我在你的代码中遗漏了一些东西。你传递的值没有绑定（没有括号），所以它没有得到评估。这是一个原始字符串。

上面的答案仍然有效，但在你的情况下通过传递带有绑定的值
会容易得多
[num-stars]="3"

这是另一个没有parseInt但使用绑定的plnkr。

typescript具有长度的新数组

1 个答案: