5

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">&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 があります。あなたのインポートに基づいていると思いました（「@angular/...」ではなく「angular2/...」を参照しています）。

古い構文を試すか、Angular の新しいバージョンに更新してください。

于 2016-05-26T10:40:09.977 に答える
2

*ngFor については上記の回答は正しいですが、"template" タグの形式が少し異なります。

RC0 および RC1 の前:

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

RCx の後:

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

team は、チーム全体で繰り返される "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="let item in items";

このように試してもうまくいかないことを確認してください

import { CommonModule } from '@angular/common';

module.ts に挿入されているかどうか、これも測定されます

指定されたすべての要素がスペルで正しいことを確認し、

対応する終了タグが存在する

于 2017-12-19T10:03:22.430 に答える