Angular 2 组件 *ngFor 模板解析错误
Angular 2 component *ngFor template parse error
我从 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
这是我的代码:
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 = [...];
[...]
}
我尝试生成一个模态组件,没有按钮它工作正常。
为什么这是错误的?为什么不能 angular 遍历对象子数组?
我正在搜索小时,请帮助
在 angular2.rc1 中,*ngFor 的语法已更改,从 *ngFor="#item in items"
到 *ngFor="let item in items"
;
您使用的是新语法,但使用的是旧版本 angular2。我认为它基于您的进口(您指的是 'angular2/...',而不是“@angular/...”)。
尝试旧语法或更新到 angular 的新版本。
以上答案对于 *ngFor 是正确的,但是,"template" 标签的格式略有不同。
RC0 和 RC1 之前:
<template ngFor #team [ngForOf]="teams">
RCx 之后:
<template ngFor let-team [ngForOf]="teams">
其中 team 是 "for of" 在 teams 中迭代的变量。 # 仍在使用!如果您想访问 html 组件:
<input #numberInput step="0.1" type="number">
注意这里没有任何变化。思考这个问题的方法是; 'let'用于数据的变量; “#”用于访问 html 个组件。
更多变更详情,请务必先参考:
https://github.com/angular/angular/blob/master/CHANGELOG.md
*ngFor="let item in items";
这样试还是不行,请确保
从'@angular/common'导入{CommonModule};
是否被注入 module.ts 这也完成了测量
确保所有给定元素的拼写正确
存在相应的结束标记
我从 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
这是我的代码:
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 = [...];
[...]
}
我尝试生成一个模态组件,没有按钮它工作正常。 为什么这是错误的?为什么不能 angular 遍历对象子数组? 我正在搜索小时,请帮助
在 angular2.rc1 中,*ngFor 的语法已更改,从 *ngFor="#item in items"
到 *ngFor="let item in items"
;
您使用的是新语法,但使用的是旧版本 angular2。我认为它基于您的进口(您指的是 'angular2/...',而不是“@angular/...”)。
尝试旧语法或更新到 angular 的新版本。
以上答案对于 *ngFor 是正确的,但是,"template" 标签的格式略有不同。
RC0 和 RC1 之前:
<template ngFor #team [ngForOf]="teams">
RCx 之后:
<template ngFor let-team [ngForOf]="teams">
其中 team 是 "for of" 在 teams 中迭代的变量。 # 仍在使用!如果您想访问 html 组件:
<input #numberInput step="0.1" type="number">
注意这里没有任何变化。思考这个问题的方法是; 'let'用于数据的变量; “#”用于访问 html 个组件。
更多变更详情,请务必先参考: https://github.com/angular/angular/blob/master/CHANGELOG.md
*ngFor="let item in items";
这样试还是不行,请确保
从'@angular/common'导入{CommonModule};
是否被注入 module.ts 这也完成了测量
确保所有给定元素的拼写正确
存在相应的结束标记