FormControl 属性的 SplitPipe 不起作用答案

【问题标题】：SplitPipe for a FormControl property does not workFormControl 属性的 SplitPipe 不起作用
【发布时间】：2019-04-30 15:40:10
【问题描述】：

我正在尝试根据它们之间的逗号拆分提交给表单的输入值。这是一个例子，

TS 文件

export class FoodComponent implements OnInit {
  myForm: FormGroup;
  private food;

  amount = new FormControl('', Validators.required);

  constructor(public serviceFood: FoodService, fb: FormatBuilder) {
    this.myForm = fb.group({
      amount: this.amount
    });
  };

  ngOnInit():void {
    this.loadAll();
  }
}

HTML 文件中的表格

<td>{{food.amount}}</td>

用户每次输入当天的金额，数值显示如下：

4.3,5.2,2.3

所有输入都呈现在一个单元格中。我想拆分它们并将它们打印在一个单元格中的不同行或多行中的多个单元格中。

最近我遇到了管道并安装了角管。将 SplitePipe 导入到我的本地 ts 文件中。但是当我进行以下更改时，什么都没有出现：

<td>{{food.amount | split(',')}}</td>

也尝试了与Hello World的拆分，我的页面没有出现：

<td>{{'Hello World' | split}}</td>

我正在寻找各种解决方案。任何帮助将不胜感激。

【问题讨论】：

控制台出现什么错误
@Ashok 控制台错误：[Script Loader] ReferenceError:“require is not defined” scripts.bundle.js line 25 > eval:1 exports addScript.js:20 524 testcheck.js: 1 Webpack 5 addScript.js:8 日志 addScript.js:8 导出 addScript.js:25 524 testcheck.js:1 Webpack 5 [Script Loader] ReferenceError: "filter is not defined" scripts.bundle.js line 25 > eval:2 导出 addScript.js:20 523 splitFunction.js:1 Webpack 5
看起来您缺少导入。您导入了 Splitpipe 吗？
刚刚找到了答案。我在 app.module 中缺少导入

标签： angular angular4-forms angular-pipe

【解决方案1】：

将参数传递到管道的语法与常规函数略有不同。您不使用括号和逗号，而是在每个参数前使用:，如下所示：

<td>{{ food.amount | split : ',' }}</td>

【讨论】：

试过这个，对我不起作用。 {{food.amount}} 有效，但我一介绍 |到参数，在控制台中给我上面的错误。
您是否将SplitPipe 添加到您的NgModule 中的声明数组中？

【解决方案2】：

我在 app.module 中缺少导入。对于普通管道，我需要在 app.module 中 import {CommonModule} from '@angular/common'; 并在导入中声明。另外，在本地组件中导入它们。

对于拆分，我需要在我的NgModule 中声明。 @Ashok 和 @Mendy 也都做出了回应。

【讨论】：