5

我有来自角度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 = [...];

  [...]

}

我尝试生成一个模态组件，没有按钮它可以正常工作。为什么这是错误的？为什么不能对对象子数组进行角度迭代？我正在寻找几个小时，请帮忙

4

3 回答 3

6

在 angular2.rc1 中，*ngFor 的语法已从*ngFor="#item in items"变为*ngFor="let item in items";

您正在使用新语法，但使用的是旧版本的 angular2。我认为它基于您的导入（您引用的是“angular2/...”，而不是“@angular/...”）。

尝试旧语法或更新到新版本的 Angular。

于 2016-05-26T10:40:09.977 回答
2

上面的答案对于 *ngFor 是正确的，但是“模板”标签的格式略有不同。

在 RC0 和 RC1 之前：

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

RCx 之后：

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

团队是通过团队迭代的“for of”变量。# 仍在使用！如果你想访问一个 html 组件：

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

注意这里没有任何变化。思考这个问题的方法是；'let' 用于数据变量；'#' 用于访问 html 组件。

有关更多更改详细信息，请始终首先参考： https ://github.com/angular/angular/blob/master/CHANGELOG.md

于 2016-06-01T21:12:54.220 回答
0

*ngFor="让项目进入项目";

像这样尝试仍然不起作用意味着请确保

从“@angular/common”导入 { CommonModule }；

是否注入 module.ts 这也完成了测量

确保所有给定元素的拼写正确，并且

存在相应的关闭标签

于 2017-12-19T10:03:22.430 回答