我知道这类问题已经问过了,我也提到了所有已回答的问题,但仍然无法解决问题。
当我部署import 'rxjs/add/operator/fromArray';
时,会发生此错误,除了此import
和Observable.fromArray
之外,代码都可以正常工作。
我正在使用角度2.0.0-beta.7
向控制台抛出错误
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
app.component.ts
import {Component} from "angular2/core";
import {Observable} from "rxjs/Rx";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/fromArray';
@Component({
selector: 'my-app',
template: `
<input type="text" class="form-control" placeholder="Search...">
`
})
export class AppComponent {
constructor(){
var startDates = [];
var startDate = new Date();
for ( var day = -2; day <=2; day++){
var date = new Date(
startDate.getFullYear(),
startDate.getMonth(),
startDate.getDate() + day);
}
startDates.push(date);
Observable.fromArray(startDates)
.map(date => {
console.log('Getting deal for the date ' + date);
return [1, 2, 3];
})
.subscribe(x => console.log(x));
}
}
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="app/styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<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/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 type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>
Loading...
</my-app>
</body>
</html>
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"bootstrap": "^3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.22",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5"
}
}
最佳答案
我认为您可以使用“ from”运算符代替“ fromArray”运算符:
Observable.from(startDates)
.map(date => {
(...)
});