小编Dan*_*son的帖子

Mac OSX El capitan | angular-cli:0.1.0 | 节点:5.4.0 | os:darwin x64

我尝试根据angular-cli wiki安装第三方npm模块:https://github.com/angular/angular-cli/wiki/3rd-party-libs但是失败了.我几天来一直在努力奋斗,非常感谢任何帮助.

获取错误的步骤:

ng new lodashtest3 cd lodashtest3 npm install lodash --save typings install lodash --ambient --save

角-CLI-build.json:

module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; ng build (lodash在dist/vendor中正确添加)

系统config.ts:

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: …

我有一长串用户输入,并希望将它们存储在一个对象中,而不是用HTML拼写出来.我想将这些值绑定到另一个存储用户/客户数据的对象.由于其简单性和功能性,优选使用ngModel.

谁知道我怎么能做到这一点？

以下示例(不工作).

@Component({
  template: `
    <div>
      <h2>NgModel Example</h2>
      <div *ngFor="let input of inputList">
        {{ input.label }} <input type="text" [(ngModel)]="input.bindTo">
      </div>
    </div>

    <p>This is not working: {{customerInfo.name}}, {{customerInfo.email}}</p>
  `,
  directives: [...]
})

export class AppComponent {
  inputList = [
    {
      label: "Enter your name",
      bindTo: this.customerInfo.name  // also tried 'customerInfo.name'
    },
    {
      label: "Enter your email",
      bindTo: this.customerInfo.email
    }
  ]  

  customerInfo = {
    name: 'test',
    email: ''
  }
}

我真的很难尝试了解TestBed的工作原理以及如何使用它来模拟数据检索(通过AngularFire2即observables)/推进离线单元测试.如果有人可以提供一个简单的例子来查看它让事情变得如此简单.

下面是StateService的(部分).然后我将此服务注入另一个组件并打印出graphModules名称,例如

图的modules.component.html

<div *ngFor="let module of s.graphModules$ | async"><div class="module-card">{{module.name}}</div></div>

图的modules.component.ts

constructor(public s: StateService){}

state.service.ts

@Injectable()
export class StateService {

 graphModules$: FirebaseListObservable<any>;
  private auth;

  constructor(public af: AngularFire) {
    af.auth.subscribe(
      latestAuth => {
        this.graphModules$ = af.database.list('/graphModules', {
          query: {
            orderByChild: 'archived',
            equalTo: false
          }
        });
      },
      errors => {
        this.auth = {uid: 'AUTH PROBLEMS'};
        throw 'Problems authenticating';
      }
    );
  }

  saveToDB(key: string, value: any) { 
     this.af.database.list('/graphModules').update(key, value);
     ...
  }
...
}

我想要测试的是

1)给定"graphModules"的模拟/存根,将正确的.card模块数打印到DOM.

2)用s.saveToDB()更新其中一个模块后,在DOM中更新名称

另外,如果您对我的数据检索"架构"有其他意见,那么也是最受欢迎的:)

非常感谢!

编辑:

好的,我发现了如何修复1号.测试正确通过.问题2尚未得到解答.spec文件现在看起来像这样:

图的modules.component.spec.ts

class …