javascript - 带编号的角度自定义管道
问题描述
我有两个用户输入。第一个输入是主号码。第二个输入是主数字后面的零个数。
基础{{ mainNumber | number: '1.5'}}
作品。在这里,我将在主号码后面有五个零。但我希望5是动态的,成为用户在第二个字段中输入的内容。
这是component.html:
Number <input type="number" [(ngModel)]="mainNumber" placeholder="Enter the number">
Zero: <input type="number" [(ngModel)]="zeroNumber" placeholder="Enter the zero"> <br>
<hr>
<b> Number: </b>{{mainNumber}}
<b> Zero: </b> {{zeroNumber}} <br>
<!-- {{ mainNumber | number: '1.10'}} -->
Final number: {{ mainNumber | mojpipe }}
这是component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
mainNumber: number = 0;
zeroNumber: number = 0;
title = 'shopping-project';
}
这是我尝试构建的自定义管道mypipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'mojpipe' })
export class AddZero implements PipeTransform{
testTwo: number = 1;
transform(size: number){
return (size + "."+ this.testDva);
};
}
解决方案
好吧,您可以在管道表达式中使用该变量:
{{ mainNumber | number: ('1.' + zeroNumber }}
推荐阅读
- c++ - 如何使用基于数组的二进制堆访问最小元素?
- r - 用改变 y 轴在 R 中绘图
- abap - 基于表格条目的报告选择屏幕参数下方的多个文本行
- google-cloud-platform - 对 GCP Dataproc 软件配置值感到困惑
- reactjs - 如何在 reactjs 的 componentDidMount 中检索更新的状态元素
- vue.js - 对在 nativescript-vue 中打印“object.value”感到困惑
- java - 如何从 Firebase 数据快照中获取数据?
- tensorflow - 通过 docker 详细记录 tensorflow 服务
- javascript - 我可以通过仅在 ID 中引用它来使用 Jquery 屏蔽 ASP:文本框吗?
- php - 使用 PHP 在 SQL 中编辑数组