Угловое 2 компонента * ngFor ошибка шаблона синтаксического анализа

Question

У меня есть следующее сообщение об ошибке от угловой 2:

EXCEPTION: Template parse errors: 
Parser Error: Unexpected token . at column 26 in [ngFor let button of modal.buttons] in ModalComponent@11:22 (""> 
         <button type="button" class="btn" data-dismiss="modal" 
          [ERROR ->]*ngFor="let button of modal.buttons" 
          [ngClass]="button.classes" 
        "): ModalComponent@11:22 

Это мой код:

import {Component} from 'angular2/core'; 
import {NgFor, NgClass} from 'angular2/common'; 

import {EventService} from '../services/event.service'; 

interface Button { 
    text: string; 
    classes: Array<string>; 
    clicked: Function; 
} 

interface Modal { 
    title: string; 
    text: string; 
    buttons: Array<Button>; 
} 

@Component({ 
    selector: 'modal', 
    template: `<div *ngIf="modal" class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
        <h4 class="modal-title">{{modal.title}}</h4> 
        </div> 
        <div class="modal-body" [innerHTML]="modal.text"></div> 
        <div class="modal-footer"> 
        <button type="button" class="btn" data-dismiss="modal" 
         *ngFor="let button of modal.buttons" 
         [ngClass]="button.classes" 
        >{{button.text}}</button> 
        </div> 
       </div> 
       </div>`, 
    directives: [NgFor, NgClass] 
}) 
export class ModalComponent { 
    modalElement: HTMLElement; 
    modal: Modal = [...]; 

    [...] 

} 

Я стараюсь, чтобы создать модальный компонент, без кнопок он отлично работает. Почему это неправильно? Почему не удается выполнить угловую итерацию над дочерним массивом объекта? Я ищу часы, пожалуйста, помогите

Answer 1

В angular2.rc1 синтаксис * ngFor изменился с *ngFor="#item in items" по *ngFor="let item in items";

Вы используете новый синтаксис, но имеете старую версию углового2. Я предположил, что он основан на вашем импорте (вы ссылаетесь на «угловое2/...», вместо «@angular/...»).

Попробуйте старый синтаксис или обновите до новой версии угловой.

Answer 2

Вышеприведенный ответ верен для * ngFor, однако формат тега «шаблон» немного отличается.

Перед RC0 и RC1:

<template ngFor #team [ngForOf]="teams"> 

После RCX:

<template ngFor let-team [ngForOf]="teams"> 

Где команда является "ибо" переменной итерация команд. # Все еще используется! Если вы хотите получить доступ к компоненту html:

<input #numberInput step="0.1" type="number"> 

Обратите внимание: здесь ничего не изменилось. Способ думать об этом; 'let' используется для переменных данных; '#' используется для доступа к компонентам html.

Для получения более подробной информации изменения, пожалуйста, всегда относятся к первым: https://github.com/angular/angular/blob/master/CHANGELOG.md

Answer 3

* ngFor = "пусть пункт в пунктах";

Попробуйте, как это до сих пор не работает, пожалуйста, средства обеспечения

импорт {CommonModule} от '@ угловой/общий';

впрыскивают в module.ts или нет это также сделано тез

обеспечить все данный элемент правильно с правописанием и

соответствующего закрывающий тег присутствуют