FormControl 属性 的 SplitPipe 不起作用
SplitPipe for a FormControl property does not work
我正在尝试根据输入值之间的逗号拆分提交给表单的输入值。这是一个例子,
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 文件中的 table
<td>{{food.amount}}</td>
每次用户输入他们当天拥有的数量时,值显示如下:
4.3,5.2,2.3
所有输入都在一个单元格中呈现。我想拆分它们并在一个单元格中的不同行中打印它们,或者在多行中的多个单元格中打印它们。
最近我遇到了管道并安装了 angular-管道。将 SplitePipe 导入到我的本地 ts 文件中。但是当我进行以下更改时,什么也没有出现:
<td>{{food.amount | split(',')}}</td>
也试过用Hello World拆分,我的页面上不来:
<td>{{'Hello World' | split}}</td>
我正在搜索所有的解决方案。任何帮助将不胜感激。
将参数传递到管道的语法与常规函数略有不同。您不使用括号和逗号,而是在每个参数前使用 :
,如下所示:
<td>{{ food.amount | split : ',' }}</td>
我在 app.module 中缺少导入。对于普通管道,我需要在 app.module 中 import {CommonModule} from '@angular/common';
并在导入中声明。另外,在本地组件中导入它们。
对于拆分,我需要在 NgModule
中声明。 @Ashok 和@Mendy 也都回复了。
我正在尝试根据输入值之间的逗号拆分提交给表单的输入值。这是一个例子,
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 文件中的 table
<td>{{food.amount}}</td>
每次用户输入他们当天拥有的数量时,值显示如下:
4.3,5.2,2.3
所有输入都在一个单元格中呈现。我想拆分它们并在一个单元格中的不同行中打印它们,或者在多行中的多个单元格中打印它们。
最近我遇到了管道并安装了 angular-管道。将 SplitePipe 导入到我的本地 ts 文件中。但是当我进行以下更改时,什么也没有出现:
<td>{{food.amount | split(',')}}</td>
也试过用Hello World拆分,我的页面上不来:
<td>{{'Hello World' | split}}</td>
我正在搜索所有的解决方案。任何帮助将不胜感激。
将参数传递到管道的语法与常规函数略有不同。您不使用括号和逗号,而是在每个参数前使用 :
,如下所示:
<td>{{ food.amount | split : ',' }}</td>
我在 app.module 中缺少导入。对于普通管道,我需要在 app.module 中 import {CommonModule} from '@angular/common';
并在导入中声明。另外,在本地组件中导入它们。
对于拆分,我需要在 NgModule
中声明。 @Ashok 和@Mendy 也都回复了。