Question

编辑：我尝试应用他的答案中提供的修复@Thierry，但是我一直遇到同样的错误。我创建了一个包含完整项目的存储库（干净但没有注释），因为它遵循了教程并应用了@Thierry的修复后：https://github.com/dragGH102/angular2-tutorial-part4-test

我正在https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

关注Angular 2的教程第4部分的

结尾我收到以下错误：

SyntaxError：意外的标记＆lt;（...）Zone.run @ angular2-polyfills.js：1243

我甚至试图：

复制粘贴http://plnkr.co/edit/?p=preview提供但同样错误的Plunkr。
删除Promise部分（这似乎是基于下面的堆栈跟踪导致错误的原因）
自己编译TS文件（而不是通过“npm start”来完成）

错误堆栈跟踪

SyntaxError: Unexpected token <(…)
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @   angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback   @   angular2-polyfills.js:480
lib$es6$promise$$internal$$publish  @   angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @   angular2-polyfills.js:401
(anonymous function)    @   angular2-polyfills.js:123
Zone.run    @   angular2-polyfills.js:1243
zoneBoundFn @   angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @   angular2-polyfills.js:262

显然（例如angular2: Uncaught SyntaxError: Unexpected token <）这是由于浏览器由于错误而找不到有效的JS代码，但我无法弄清楚是什么问题。

这是我的代码（也可在http://plnkr.co/edit/Q5F0mV8Hbdcr2rtZUSw5获得）

的index.html

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {'app': {defaultExtension: 'ts'}}
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>
</head>

<body>
    <my-app>Loading...</my-app>
</body>
</html>

app.component.ts

import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero'; 
import {HeroDetailComponent} from './hero-detail.component'; 
import {HeroService} from './hero.service'; 

@Component({
    selector: 'my-app',
    template:`
      <h1>{{title}}</h1>
      <h2>My Heroes</h2>
      <ul class="heroes">
       <li *ngFor="#hero of heroes"
           [class.selected]="hero === selectedHero"
           (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
      </ul>
     <my-hero-detail [hero]="selectedHero"></my-hero-detail>
     `,
     // for the sake of code readibility I removed "styles"
    directives: [HeroDetailComponent], 
    providers: [HeroService], 
})

export class AppComponent implements OnInit {
    title = 'Tour of Heroes'; 
    heroes: Hero[]; 
    selectedHero: Hero; 

    constructor(private _heroService: HeroService) { } 

    getHeroes() {
        this.heroes = this._heroService.getHeroes().then(heroes => this.heroes = heroes);
    }

    ngOnInit() {
        this.getHeroes();
    }

    onSelect(hero: Hero) { this.selectedHero = hero; }

}

boot.ts

import {bootstrap}    from 'angular2/platform/browser' 
import {AppComponent} from './app.component'

bootstrap(AppComponent);

英雄detail.component.ts

import {Component} from 'angular2/core';
import {Hero} from './hero';

@Component({
    selector: 'my-hero-detail',
    template: `
      <div *ngIf="hero">
        <h2>{{hero.name}} details!</h2>
        <div><label>id: </label>{{hero.id}}</div>
        <div>
          <label>name: </label>
          <input [(ngModel)]="hero.name" placeholder="name"/>
        </div>
      </div>`,
    inputs: ['hero']
})

export class HeroDetailComponent {
    hero: Hero;
}

hero.service.ts

import {Hero} from './hero';
import {HEROES} from './mock-heroes'; 
import {Injectable} from 'angular2/core';

@Injectable() 
export class HeroService { 
    getHeroes() {
        return Promise.resolve(HEROES); 
    }

}

hero.ts

export interface Hero {
    id: number;
    name: string;
}

模拟heroes.ts

import {Hero} from "./hero";

export var HEROES: Hero[] = [
    { "id": 11, "name": "Mr. Nice" },
    { "id": 12, "name": "Narco" },
    { "id": 13, "name": "Bombasto" },
    { "id": 14, "name": "Celeritas" },
    { "id": 15, "name": "Magneta" },
    { "id": 16, "name": "RubberMan" },
    { "id": 17, "name": "Dynama" },
    { "id": 18, "name": "Dr IQ" },
    { "id": 19, "name": "Magma" },
    { "id": 20, "name": "Tornado" }
];

Answer 1

我看了你的傻瓜，问题来自这条线：

async

事实上，你混合了两种方法：

要么在组件属性上设置promise，然后在@Component({ selector: 'my-app', template:` <li *ngFor="#hero of heroes"> (...) </li> ` }) export class AppComponent implements OnInit { getHeroes() { this.heroes = this._heroService.getHeroes(); } }管道上设置，以便在解析promise时显示数据
```
then
```
要么调用async方法并在解析为组件属性时设置接收的数据。在这种情况下，您不需要@Component({ selector: 'my-app', template:` <li *ngFor="#hero of heroes"> (...) </li> ` }) export class AppComponent implements OnInit { getHeroes() { this._heroService.getHeroes().then(heroes => this.heroes = heroes); } }管道
```
SyntaxError: Unexpected token <(…)
```

在分叉的plunkr中查看我的更新：http://plnkr.co/edit/Rw4kOzKFbVosaoe7dRL1?p=preview。

否则，我无法看到$quantity_arr = array(); $id_arr = array(); while($row = mysqli_fetch_assoc($query_run)){ $quantity_arr[] = $row['quantity']; $id_arr[] = $row['book_id']; } // when one of the edition is not available if($quantity_arr[0] == 0 || $quantity_arr[1] == 0){ // checking if the quantity is 0. if($quantity_arr[0] == 0){ $quantity = $quantity_arr[1]; $id = $id_arr[1]; } elseif ($quantity_arr[1] == 0){ $quantity = $quantity_arr[0]; $id = $id_arr[0]; } else { echo "Book not available"; exit; }之类的错误，但大部分时间都是因为您尝试加载JS文件而导致404错误...

有关详细信息，请参阅此问题：

How to debug Angular2 in Chrome

Angular 2教程 - 第4部分：“SyntaxError：意外的标记＆lt;（...）”

1 个答案: