Question

我在流星内部有角度2。我一直在关注它的教程，并坚持这一步：

http://www.angular-meteor.com/tutorials/socially/angular2/dynamic-template

我似乎无法弄清楚为什么引用* ngfor的app.component.html文件会抛出该错误，因为所有的角度＆amp; angular2-meteor npm包安装在我的node_modules目录中。这是我的package.json文件：

{
  "name": "angular2-meteor-base",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --driver-package practicalmeteor:mocha",
    "test:ci": "meteor test --once --driver-package dispatch:mocha-phantomjs"
  },
  "devDependencies": {
    "chai": "3.5.0",
    "chai-spies": "0.7.1"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-alpha.8",
    "angular2-meteor": "0.6.2",
    "angular2-meteor-auto-bootstrap": "0.6.0",
    "angular2-meteor-polyfills": "0.1.1",
    "angular2-meteor-tests-polyfills": "0.0.2",
    "es6-shim": "0.35.1",
    "meteor-node-stubs": "0.2.3",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
  }
}

这是app.component.html：

<head>
  <title>tutorial</title>
</head>

<body>
  <h1>Welcome to Price Compare!</h1>

  <ul>
    <li>
        <span>Dubstep-Free Zone</span>
        <p>
        Can we please just for an evening not listen to dubstep.
        </p>
    </li>
    <li>
        <span>All dubstep all the time</span>
        <p>
        Get it on!
        </p>
    </li>
</ul>

<div>
  <ul>
    <li *ngFor="let party of parties">
      {{party.name}}
      <p>{{party.description}}</p>
      <p>{{party.location}}</p>
    </li>
  </ul>
</div>


</body>

这是app.component.ts：

import { Component } from '@angular/core';

import template from './app.component.html';




@Component({
  selector: 'app',
  template
})

export class AppComponent {
  parties: any[];

  constructor() {
    this.parties = [
      {'name': 'Dubstep-Free Zone',
        'description': 'Can we please just for an evening not listen to dubstep.',
        'location': 'Palo Alto'
      },
      {'name': 'All dubstep all the time',
        'description': 'Get it on!',
        'location': 'Palo Alto'
      },
      {'name': 'Savage lounging',
        'description': 'Leisure suit required. And only fiercest manners.',
        'location': 'San Francisco'
      }
    ];
  }
}

这是我的index.html：

<head>
    <base href="/">
</head>
<body>
  <app> </app>
</body>

这是我的主要内容：

import { bootstrap } from 'angular2-meteor-auto-bootstrap';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

控制台输出：

我相信我的文件完全符合教程，但也许我只是没有看到明显的东西......

更新1：我刚刚删除了我的node_modules目录并重新运行了meteor npm install，然后从教程的git repo中重新复制了客户端文件夹中的所有文件内容，但仍然无法正常工作。它仍然没有识别* ngFor标签，它告诉我某个方面我的流星项目没有识别角度或可能是我的节点安装和OS浏览器组合。我在Windows 7上使用Chrome，节点版本：v6.3.1

更新2：我想@neeraj可能会提到我应该首先解决的问题......那就是我的app.component.html文件不应该有head或body标签。我认为这是正确的，因为meteor将你的html文件内容添加到它的＆＃34; master＆＃34;因此html文件不需要头部和身体标签。但是，当我在app.component.html文件中省略head和body标签时，会抛出此错误：

While processing files with templating (for target web.browser):
client/app.component.html:1: Expected one of: <body>, <head>, <template>

Answer 1

就像我在帖子中提到的那样“我想@neeraj可能会提到我应该首先解决的问题......那就是我的app.component.html文件不应该有头部或身体标签”

一旦我解决了这个问题，其他一切似乎都已落实到位----我解决它的方法是从git克隆教程并从第1步重新开始。

Angular 2：未捕获错误：非法HTML属性名称：* ngfor

1 个答案: