I have the following error from angular 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
This is my code:
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">×</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 = [...];
[...]
}
I try to generate a modal component, without the buttons it works fine. Why is this wrong? Why cant angular iterate over an object child array? I am searching for hours, please help
In angular2.rc1 syntax of *ngFor has changed, from *ngFor="#item in items"
to *ngFor="let item in items"
;
You are using new syntax, but have old version of angular2. I supposed it based on your imports (you are referencing to 'angular2/...', instead of '@angular/...').
Try old syntax or update to new version of angular.
The above answer is correct for *ngFor, however, the "template" tag's format is slightly different.
Before RC0 and RC1:
<template ngFor #team [ngForOf]="teams">
After RCx:
<template ngFor let-team [ngForOf]="teams">
Where team is the "for of" variable iterated through teams. The # is still used! If you want access to an html component:
<input #numberInput step="0.1" type="number">
Notice nothing has changed here. The way to think about this is; 'let' is used for variables of data; '#' is used to get access to html components.
For further change details, please always refer first to: https://github.com/angular/angular/blob/master/CHANGELOG.md
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With