如何在角度4中使用导入的npm包中的js函数 [英] How to use js function from imported npm package in angular 4

问题描述

我正在使用角度4，这是我具有投标列表组件的问题，我想使用链接文档如何使用该功能，我使用

I'm using angular 4, here is the problem I have proposal-list component, and I would like to use accounting-js from npmjs for accounting-js and link documentation how to use the function, I installed using

npm install accounting-js

这是我的proposal-list.component.ts

here is my proposal-list.component.ts

import { Component, OnInit } from '@angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
@Component({
  selector: 'app-proposal-list',
  templateUrl: './proposal-list.component.html',
  styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

我的问题是如何在formatNumber.js中使用该函数?

my question how I can use the function inside formatNumber.js?

我尝试在proposal-list.component.html

I tried to use in proposal-list.component.html

total money =   {{formatNumber(1000500.65)}} 

但未显示，但没有错误消息.

but it's not showed up, but no error message.

这是我的app.module.ts

here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AlertModule } from 'ngx-bootstrap';
import { BsDropdownModule } from 'ngx-bootstrap';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { AppRoutingModule } from './app-routing.module';
import { DocumentsComponent } from './documents/documents.component';
import { ProposalListComponent } from './proposal/proposal-list/proposal-list.component';
import { ProposalShowComponent } from './proposal/proposal-show/proposal-show.component';
import { ProposalNewComponent } from './proposal/proposal-new/proposal-new.component';


@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent,
    DocumentsComponent,
    ProposalListComponent,
    ProposalShowComponent,
    ProposalNewComponent
  ],
  imports: [
    AlertModule.forRoot(),
    BsDropdownModule.forRoot(),
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐答案

您应该在ts文件中执行此操作，如果要在html文件中执行此操作，则必须在ts中定义一个函数.试试这个.

you should be doing it in your ts file and if you want to do it in your html then you have to define a function in your ts. Try this.

import { Component, OnInit } from '@angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
@Component({
  selector: 'app-proposal-list',
  templateUrl: './proposal-list.component.html',
  styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
private money: number ;
      constructor() { }
      ngOnInit() {
this.money = formatNumber(1000500.65)
      }
    }

和您的html

总金额= {{money}}

total money = {{money}}

但是如果您想即时使用它，可以使用FormatNumber函数创建自定义管道

but if you want to use it on the fly, you can create a custom pipe using FormatNumber function

import { Pipe, PipeTransform } from '@angular/core';

import { formatNumber } from 'accounting-js/lib/formatNumber.js';

@Pipe({name: 'formatNumber'})
export class FormatNumberPipe implements PipeTransform {
    transform(money:number): number {
        return formatNumber(money)
    }
}

并且可以像

total money =   1000500.65 | formatNumber

更新您必须将管道包含在AppModule的声明数组中.

Update You must include your pipe in the declarations array of the AppModule.

app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { FormatNumberPipe} from './pipe.component';// whatever the name of your pipe component

    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      declarations: [
        AppComponent,
        FormatNumberPipe// **<-- this guy**
    ]

......

这篇关于如何在角度4中使用导入的npm包中的js函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！