小编Lij*_*raj的帖子

我想利用在angular2观测和糊涂了,为什么我应该使用map()过subscribe().假设我从webApi获取值,就像这样

  this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')

现在使用subscribe(success, error, complete)我可以获得成功回调的所有值,我可以返回完整回调的值.如果我可以做所有这些功能,那么需要map()什么？它有什么优势吗？

简而言之,为什么人们应该这样写:

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .map(r=>{})
    .subscribe(value => {
    }, error => error, () => {
});

当他们可以简单地写这个没有map函数:

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .subscribe(value => {        
    }, error => error, () => {           
});

我在angular2中使用webpack,当我尝试运行我的应用程序时,我得到一个错误说明

找不到模块"@ angular/animations"

的package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": { …

我正在为我的项目使用angular4,当我第一次遇到这个错误时,我发现一些博客要求我在项目中安装对象分配和使用.所以我使用npm install object-assign --save命令安装了object-assign,并在polyfill.ts文件中引用它,就像这样

import 'object-assign';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

然后我使用此命令构建项目

ng build --prod --env=prod

但即使在重新呈现此文件后,我也会收到这样的错误

我怎么能解决这个问题,我错过了什么.

我能够在除IE11之外的所有其他浏览器中看到该应用程序

好吧,我只是想知道是否有任何命令将直接编译打字稿代码并获得输出.现在,我正在做的是,每次当我在文件中进行更改时,我必须重新运行命令以便编译它

npm start

这启动浏览器,然后我必须使用ctrl + c停止执行,然后我必须使用npm命令运行该文件

node filename

看到输出.

所以我想知道的是,是否有任何npm命令将编译.ts文件并查看我在文件中使用的文件所做的更改

node filename

命令

我需要上传一个.CSV文件并在我的组件中读取它们,我已经浏览了这个博客,但它有一个.CSV文件存储在一个特定的loaction中,我想上传.CSV文件并在我的组件中读取它们.我该怎么做

我们有可以使用的任何内置插件吗？如果没有那么我们怎样才能实现这一目标.

这是我试过的代码

视图

<input type="file" name="File Upload" id="txtFileUpload" 
        (change)="changeListener($event)" 
        accept=".csv"/>

零件

changeListener($event:Response): void {
    debugger;
   // i am not able to get the data in the CSV file
  }

在changeListener()中,我无法获取.CSV文件的内容,任何人都可以帮助我吗？

谢谢

我是angular 2的新手,并试图在我的项目中使用ng2-datetime-picker.现在,在我运行项目后安装ng2-datetime-picker软件包时出现404错误,说明找不到ng2-datetime-picker,经过一些博客后我才知道我必须在systemjs.config中添加配置. js文件但是当我浏览我的项目时,我在项目中看不到任何systemjs.config.js文件.所以我的问题是,

1. systemjs.config.js文件在哪里？

2. 以下代码是systemjs.config.js文件

   System.import('app').catch(function(err){console.error(err);});

3. 如果是,那么如何将地图和包添加到此文件中

   map ['ng2-datetime-picker'] ='node_modules/ng2-datetime-picker/dist'; packages ['ng2-datetime-picker'] = {main:'ng2-datetime-picker.umd.js',defaultExtension:'js'} update 1

这是我的systemjs.config.js文件

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app : 'ScriptsApp', // 'dist',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other …

假设我在package.json中有这样的脚本

 "scripts": {
    "a1": "first command",
    "a2": "second command",
    "a3": "third command",

  }

如果我想在脚本a3中运行脚本a1和a2我该怎么办呢？这有可能吗？我在用

节点版本:v6.9.4

npm版本:4.3.0

我希望实现这样的目标

"scripts": {
    "a1": "first command",
    "a2": "second command",
    "a3": "third command && a1 && a2",

  }

已经发布了许多针对此错误的博客,但没有为angular4指定任何博客.

我在表单上添加和删除动态控件

在初始化期间向窗体添加控件

ngOnInit() {

    this.lienHolder = this._fb.group({
      emailAddress: ['', [Validators.required, Validators.email]],
      policyDetails: this._fb.array([
        this.initPolicyTemplate(),
      ])
    });

  }

 initPolicyTemplate() {
    return this._fb.group({
      policyNumber: ['', [Validators.required, Validators.pattern("(^[^0][A-Z]{1}[0-9]*$)")]],
      vinNumber: ['', [Validators.required, Validators.pattern('^[0-9]{6}$')]],
    });
  }

通过调用此方法添加更多控件

 addPolicyTemplate() {
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.push(this.initPolicyTemplate());
  }

从表单中删除控件

  removePolicyTemplate(i: number) {  
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.removeAt(i);
  }

但是当我构建代码时,我得到这样的错误

这是我的HTML

  <div formArrayName="policyDetails">
        <div *ngFor="let _policy of lienHolder.controls.policyDetails.controls; let i=index">
          <div class="panel panel-default">
            <div class="panel-head">
              <div class="glyphicon glyphicon-remove pull-right" *ngIf="lienHolder.controls.policyDetails.controls.length > 1" (click)="removePolicyTemplate(i)"></div>
            </div>
            <div class="panel-body">
              <div [formGroupName]="i"> …

我是angular2的新手，我想在用户在dropDown中选择某个值时触发一个函数。因此，我尝试实现FormControl类的statusChange，但未触发它，

想知道如何以及何时在angular2中使用statusChange这是我的代码

class policy{
 subCategory: FormControl = new FormControl();
 ngOnInit() {
            this.subCategory.statusChanges.subscribe(
                s => {
                    alert('success');
                }, e => {
                    alert('error');
                }, () => {
                    alert('complete');
                }
            );
        }
}

我认为通过实现statusChanges，我可以在下拉列表中的每个值更改上触发成功函数，显然现在它可以正常工作。

更新1

我已经更新了plunkr

我是angular2的新手,我遇到了这个错误.我有这样的课

@Injectable()
export class VehicleDetails {
    constructor(private policynumber: string, private vinnumber: string) {
        this.policyNumber = policynumber,
            this.vinNumber = vinnumber
    }
    policyNumber: string;
    vinNumber: string;
}

和另一个这样的课

export class Policy {
    constructor() {
    }
    emailAddress: string;
    vehicleDetails: VehicleDetails[]
}

我已经在这样的模块中导入了我的课程

import { Policy } from './models/Policy';
import { VehicleDetails } from './models/VehicleDetails';
@NgModule({
  declarations: [
    LienholderComponent,
    AppComponent,
    PolicyVehicleComponent
  ],
  imports: [
    RouterModule.forRoot(
      APP_ROUTES,
      { enableTracing: true } // <-- debugging purposes only
    ),
    BrowserModule,
    FileUploadModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [Policy, VehicleDetails], …

我刚刚开始使用CLI,当我尝试安装@ angular/cli并运行代码时 ng --help

我收到以下错误

'ng'不被识别为内部或外部命令,

我已经浏览了所有博客,并且在按照博客中列出的所有步骤后没有找到任何帮助

1. 我改变了

用户变量路径:; C:\ Program Files \nodejs \和系统变量:C:\ Program Files \nodejs \;%AppData%\npm ;;

1. 当我运行命令

   npm install -g @ angular/cli

我在node_modules文件夹下找到了以下文件

@angular

-cli

---斌

----- NG

CLI

我试图使用清理缓存

npm cache clean 

然后运行代码

ng --version

但我收到标题中提到的错误

我是 angularJS2 的新手，我正在尝试使用 ReactiveFormsModule 以 angularJS2 形式学习验证。现在我被困在如何验证 angularJS2 中的单选按钮上

这是我的组件代码

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { userDetails } from '../app/userDetails'

@Component({
    selector: 'user-validation',
    templateUrl: '../app/app.template.html'
})
export class userComponent implements OnInit {
    constructor(private fb: FormBuilder) { }
    userForm: FormGroup;
    users = new userDetails();
    ngOnInit(): void {
        this.buildForm();
    }

    buildForm(): void {
        this.userForm = this.fb.group({
            'username': [this.users.username, [
                Validators.required,
                Validators.minLength(4),
                Validators.maxLength(24)
            ]
            ]
        });

        this.userForm.valueChanges
            .subscribe(data => this.onValueChanged(data));

        this.onValueChanged(); // …