import { Headers, Http } from '@angular/http';

@Injectable()
export class PublisherService{

    private publishersUrl = 'app/publisher';

    constructor(private http: Http) { }

    getPublishers(): Promise<Publisher[]>{
        return this.http.get(this.publishersUrl)
                   .toPromise()
                   .then(response => response.json().data) 
                   .catch(this.handleError);
    }
}    

我收到此错误:

属性'toPromise'在'Observable'类型上不存在

目前我重写提供者使用这样的模拟服务:

beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    tcb.overrideProviders(AddFieldToObjectDropdownComponent,
        [
             provide(ServiceA, { useClass: MockServiceA })),
             provide(ServiceB, { useClass: MockServiceB }))
        ])...

我想对组件使用的管道做同样的事情.我试过了,provide(PipeA, { useClass: MockPipeA })和provide(PipeA, { useValue: new MockPipeA() })但都没有奏效.

从rest api获取json数组对象并尝试在ngfor中显示失败的原因

错误

EXCEPTION:找不到'object'类型的不同支持对象'[object Object]'.NgFor仅支持绑定到诸如Arrays之类的Iterables.在[HomeComponent @ 5:37中的索引]中

码

import {Component} from 'angular2/core';
import {HomeService} from './home.services';
import {Index} from './index';

@Component({
    selector: 'home-app',
    providers: [HomeService],

    template: `
        <section class="left_side">
            <article>
                <div class="div_home">
                    <div class="div_homeIndxPartition">
                        <div class="div_IndxPartition" *ngFor="#indObj of indexes">
                            <table width="500px" class="idx_cons_table_det">
                                <tr>
                                    <th align="center" color="#A9F5F2"><h3>{{indObj.name}} ({{indObj.tracker}})</h3></th>
                                    <th align="center">Value</th>
                                    <th align="center">Change</th>
                                    <th align="center">%</th>
                                </tr>
                                <tr>
                                    <td align="center" colspan="1"></td>
                                    <td align="center">{{indObj.value}}</td>
                                    <td align="center">{{indObj.change}}</td>
                                    <td align="center">{{indObj.percent}}%</td>
                                </tr>
                            </table>
                            <br/>
                            <table width="500px" class="idx_cons_table">
                                <tr>
                                    <th align="center">High</th>
                                    <th align="center">Low</th>
                                    <th align="center">Open</th>
                                    <th align="center">Close</th>
                                    <th …

我的应用程序使用JSPM和SystemJS进行模块加载,并使用angular.

我的config.js文件有角度图,如:

"angular": "github:angular/bower-angular@1.5.8"

所以,当我这样做时import angular from 'angular',我从config.js文件中指定的Path获取angular.js 文件.非常好.

现在要求是我想在应用程序中使用缩小的第三方javascript文件(angular.min.js).但是jspm 注册表中没有缩小的文件
所以我的应用程序的初始加载时间很长,因为有很多大文件,例如angular.js,browser.js等需要花费太多时间来加载.

我知道,我可以做一个jspm bundle递归缩小所有依赖文件,包括供应商的文件.但我的问题是:

1 -是否可以直接使用JSPM的供应商缩小文件(angular.min.js)？使用供应商的缩小文件而不是将它们缩小为自己是好的,不是吗？

2 -如果上面的一个不可能,那么我如何只捆绑我的应用程序特定文件并仍然能够使用(单独捆绑)minified angular.js文件？

这里推荐的方法是什么？

Observable无法分配,我的package.json文件成立

"angular2": "2.0.0-beta.17",
"systemjs": "0.19.24",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"

我的终端开始编译它时出现问题,显示错误消息

信息:

'\ u001b [31mresources/assets/typescript/services/user.service.ts(25,5):\ u001b [39merror TS2322:Type \'Observable <{}> \'不能分配给类型''Observable \'. \n类型\'{} \'不能指定为类型\'用户[] \'.\n \'{} \'中缺少属性\'长度\'.}

在我的服务组件this.loggedUser $无法由构造函数内的新Observable初始化,它打破了整个事情.

这是我的服务组件

import {Injectable} from 'angular2/core';
import {Http,Response,Headers} from 'angular2/http';

import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import {User} from '../interfaces/interfaces';
export var API_ENDPOINT = 'http://localhost:8080/api';


@Injectable()
export class UserService {

  loggedUser$: Observable<User[]>; 
  private loggedUserObserver: Observer<User[]>;
  private loggedUserInfo:{
        users: User[]
    };

  constructor(private …

我正在采取Angular 2和角度的第一步,我想知道如何设置登陆页面.

我的目标是每次用户在本地存储或cookie中没有令牌时显示登录页面.

我的app.component.ts看起来像这样

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
import {NavbarComponent} from './navbar.component';
import {LoaderComponent} from './loader.component';
import {NameListService} from '../shared/index';
import {HomeComponent} from '../+home/index';
import {AboutComponent} from '../+about/index';

@Component({
  selector: 'g-app',
  viewProviders: [NameListService],
  templateUrl: 'app/components/app.component.html',
  directives: [ROUTER_DIRECTIVES, NavbarComponent, LoaderComponent]
})
@RouteConfig([
  {
    path: '/',
    name: 'Home',
    component: HomeComponent
  },
  {
    path: '/about',
    name: 'About',
    component: AboutComponent
  }
])
export class AppComponent {

}

如果我理解正确,/ home和/ about也是组件.现在我想要一个无法访问导航栏的单独页面.如果用户未登录,则用户将始终登陆.

如果有人可以帮助我开始或至少指向一个好的方向,那将是非常棒的,也许可以指向一个好的角度2教程.

这是我的应用程序基于https://github.com/mgechev/angular2-seed的样板

在Angular2/Typescript中,是否可以"观察"对象的字段以进行更改.

例如,假设我有一个类Person与领域firstName,lastName和fullName.是否有可能自动更新fullName每当要么firstName或lastName改变？

像这样的东西:

export class Person {
  firstName: string= '';
  lastName: string = '';
  fullName: string = '';

  constructor(firstName: string, lastName: string) {
    this.firstName.onChange(() => { this.updateFullName(); });
    this.lastName.onChange(() => { this.updateFullName(); });

    this.firstName = firstName;
    this.lastName = lastName;
  }

  updateFullName() {
    this.fullName = `${this.firstName} ${this.lastName}`;
  }
}

我正在尝试实现此链接中描述的导入桶结构(您可能需要向下滚动一下):

https://angular.io/docs/ts/latest/guide/style-guide.html#!#application-structure

我面临的问题是我正在创建和引用的index.ts文件

import {...} from './shared/services';

在运行时找不到并且正在抛出404.如果我参考像这样的模块

import {...} from './shared/services/index';

它工作正常.问题只出现在运行时,打字稿不会抱怨并成功编译.我在一个plunker中重复了这个问题:

https://plnkr.co/edit/ClE76zuihFTETLDGehnd?p=preview

您可以在控制台中看到错误.

在此先感谢您的帮助!

我试过像英雄之旅这样的示例应用程序.

我试图将服务cal转换为http get(InMemoryDbService),如下所示

hero.service.ts

import {Injectable} from '@angular/core';
import {HttpModule, Headers, Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';

import {Hero} from './hero';

@Injectable()
export class HeroService {

    private heroesUrl = 'app/heroes'; 

    constructor(private http : Http) { }

    // working code
    //getHeroes(): Promise<Hero[]> {
    //    return Promise.resolve(HEROS);
    //}

    getHeroes(): Promise<Hero[]> {
        debugger;
        return this.http.get(this.heroesUrl).toPromise().then(responce => responce.json().data as Hero[]).catch(this.handleError);

    }
    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

内存-data.service.ts

    import {InMemoryDbService} from …

我是角度2的新手并且正在研究Typescript,以便在角度2中构建简单的应用程序.

我发现我们可以使用类和脚本的类,接口,模块等来构建应用程序.

但据我研究javascript我知道javascript不支持类,接口,模块等.

下面是我在学习期间遇到的一些概念.

接口

接口用于类型检查对象是否适合某个结构.通过定义一个接口,我们可以命名一个特定的变量组合,确保它们总是在一起.

"当翻译成JavaScript时,界面消失了 - 它们唯一的目的是帮助开发阶段." 在下面的例子中,我们定义了一个简单的接口来检查函数的参数:

"属性的顺序并不重要.我们只需要存在所需的属性并且是正确的类型.如果缺少某些内容,类型错误或命名不同,编译器将警告我们."

类

在构建大型应用程序时,面向对象的编程风格是许多开发人员的首选.

TypeScript提供了一个类系统,包括继承,抽象类,接口实现,setter/getter等."

这是一堂课

模块

模块可以导出任意数量的函数,类或变量.默认情况下,对象以其原始名称导出.如果需要,我们可以改变它.模块也可以具有默认导出成员.

以下代码段显示了不同导出语句的示例:

由于打字稿被编译成javascript,这些类,接口,模块等是如何被发生的？