Angular2 自定义指令问题

Question

Mkay，我在网上学习了一个教程，this one，准确地说，其结果是这样的指令：

import {Component, View} from 'angular2/core';

@Component({
   selector: 'rating',
})

@View({
  template: `
      <span tabindex="0">
          <template NgFor="#val of range" #index="index">
              <span class="sr-only">(*)</span>
             <i class="glyphicon glyphicon-star"></i>
          </template>
     </span>
 `,
  directives: [NgFor]
})

export class Rating {
    private range:Array<number> = [1,2,3,4,5];
}

在这里看到各种错误：

NgFor 未定义
如果我导入 NgFor，那么 core_1.View 不是函数

Answer 1

@View() 已在 beta.10 中删除。将参数移动到 @Component() 而不是
NgFor 是 CORE_DIRECTIVES 的一部分，不再需要将它们添加到 directives: []（在旧版本中是必需的）
模板中的 ngFor 语法是 shorthand 和完整语法

1) 直接应用于标签 (shorthand)

<li *ngFor="let item of items; let i = index">...</li>

2) 使用包装 <template> 标签（完整）

<template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li></template>

另见 NgFor

更正代码

import {Component, View} from 'angular2/core';

@Component({
   selector: 'rating',
  template: `
      <span tabindex="0">
          <template ngFor let-val [ngForOf]="range" let-index="index">
              <span class="sr-only">(*)</span>
             <i class="glyphicon glyphicon-star"></i>
          </template>
     </span>
 `,
  directives: []
})

export class Rating {
    private range:Array<number> = [1,2,3,4,5];
}

Angular2 自定义指令问题

Angular2 custom directive issues

angularjs

angular2-directives

angular