Проблемы с пользовательской директивой Angular2

Хорошо, я читал онлайн-урок этот, чтобы быть точным, результатом которого стала директива как таковая:

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];
}

Видя здесь различные ошибки:

  1. NgFor не определен
  2. Если я импортирую NgFor, то core_1.View не является функцией

angular angularjs angular2-directives
person Rando Hinn    schedule 09.04.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

  • @View() был удален в beta.10. Вместо этого переместите параметры в @Component()
  • NgFor является частью CORE_DIRECTIVES, больше не нужно добавлять их в directives: [] (требовалось в более старых версиях)
  • синтаксис ngFor в вашем шаблоне был своего рода смесью сокращенного и полного синтаксиса

1) применяется непосредственно к тегу (сокращение)

<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];
}
person Günter Zöchbauer    schedule 09.04.2016
comment
Спасибо, я этого не заметил! - person micronyks; 09.04.2016
comment
Вы уже рассмотрели все пункты. Теперь есть смысл придумать новый ответ ;-) Итак, я отредактировал ваш ответ своими обновлениями :-) - person micronyks; 09.04.2016