Angular 数字管道在模态中不起作用

Question

我收到一个错误 - 错误：NG0302：找不到管道 'number'！当我在 Ionic Framework Angular 应用程序的模式中使用它时。下面的代码在父页面和应用程序的其他地方工作正常，没有任何管道声明。它只是在模态中失败。

{{ data.amount | number: '1.2-2'}}

我什至尝试了以下方法，看看能否以某种方式将我的金额转换为小数点后两位，或者可以通过管道输入但没有成功。

{{ data.amount*1.00 }}

Answer 1

在不真正了解你的情况下 file-structure 我认为发生了以下情况，如果我错了请纠正我：

Pages-folder
- parent-page-folder
  - parent.page.html
  - parent.page.ts
  - parent.page.scss
  - parent.module.ts
  - parent-routing.module.ts
  - modal-component-folder
    - modal.component.ts
    - modal.component.html
    - modal.component.scss

正如您从这个结构中看到的那样，您的 modal.component 没有模块，因此没有必要的导入来使用 angular 中的任何内置函数。您可以做的是创建一个 modal.module.ts 并导入所需的模块。它可能看起来像这样：

Parent-module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { ParentPageRoutingModule } from './parent-routing.module';

import { ParentPage } from './parent.page';
import { ModalModule } from './modal/modal.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ModalModule, // <-- needs to be declared in parent module 
    ParentPageRoutingModule,
  ],
  declarations: [ParentPage]
})
export class ParentPageModule {}

和手动创建的modal-module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import { ModalComponent } from './modal.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,

  ],
  exports: [
    CommonModule,
    FormsModule,
    IonicModule],
  declarations: [ModalComponent]
})
export class ModalModule {}

希望这能让您了解如何让 angular 中的组件知道不同的功能，即使它们是内置的。

Answer 2

为此找到了更简单、更容易的解决方法 -

在我的 page.ts 文件中 - 我从数组中获取金额值并使用 javascript toFixed 函数将我的金额转换为 2 位小数。这并不理想，但它确实有效。要使用 angular 方式，需要在很多地方导入和声明 DecimalPipe。

 this.amount = this.amount.toFixed(2);

Angular 1.0以前就是这么简单好用。在那之后，它变成了一个挫折包。 React 中的下一个应用程序是肯定的。

Angular 数字管道在模态中不起作用

Angular number pipe doesn't work in a modal

angular

ionic-framework

ionic6