Question

我试图根据输入值之间的逗号分割提交给表单的输入值。这是一个例子，

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 FILE中的表

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

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

4.3,5.2,2.3

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

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

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

还尝试了用Hello World进行拆分，但我的页面没有显示：

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

我正在搜索所有解决方案。任何帮助将不胜感激。

Answer 1

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

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

Answer 2

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

要进行拆分，我需要在NgModule中声明。 @Ashok和@Mendy都做出了回应。

FormControl属性的SplitPipe无法正常工作

2 个答案: