Come usare la funzione js dal pacchetto importato di npm in angular 4

Sto usando angular 4, ecco il problema che ho componente proposta-list, e mi piacerebbe usare accounting-js da npmjs per accounting-js e la documentazione del link come usare la funzione , che ho installato usando

npm install accounting-js 

ecco la mia proposta-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() { } } 

la mia domanda su come posso usare la funzione all’interno di formatNumber.js?

Ho provato a utilizzare in proposal-list.component.html

 total money = {{formatNumber(1000500.65)}} 

ma non è mostrato, ma nessun messaggio di errore.

informazioni addizionali per problemi

ecco la mia 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 { } 

dovresti farlo nel tuo file ts e se vuoi farlo nel tuo html devi definire una funzione nel tuo ts. Prova questo.

 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) } } 

e nel tuo html

soldi totali = {{soldi}}

ma se vuoi usarlo al volo, puoi creare un pipe personalizzato usando la funzione FormatNumber

 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) } } 

e può usarlo come

 total money = 1000500.65 | formatNumber 

Aggiornamento È necessario includere la pipe nella serie di dichiarazioni di AppModule.

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** ] ...... 

se l’importazione è un problema, allora devi pensare a questi articoli in basso.

  • wat è il tipo di esportazione della funzione nel lato del tuo file js come UMD, AMD, es2015, ecc
  • quindi è necessario capire quali tipi di modulo sono importati in che modo in typescript.
  • una volta importato il modulo / funzione puoi chiamarli dal tuo typescript

come è ansible importare la funzione open import * as services from 'thisService' Ma se quella funzione è all’interno di un modulo, è necessario importarlo dal modulo come imort { service} from 'thisServiceModule' .

Spero che sia d’aiuto