angular 2 舍入 html 中的计算数字
angular 2 round a calculated number in html
我在属于 Component1 的 html 中有一个计算数字,如下所示。
Component1 用作 bootstrap 选项卡面板中的选项卡页。
这是 html 和标签面板
<div id="minimal-tabs" style="padding:75px;padding-top:60px;font-family:Alef, sans-serif;font-size:20px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-1" role="tab" data-toggle="tab" (click)="requestTabClick()">Requests </a></li>
<li><a href="#tab-2" role="tab" data-toggle="tab" (click)="historyTabClick()">History </a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="tab-1">
</div>
<div class="tab-pane" role="tabpanel" id="tab-2">
<component1></component1>
</div>
</div>
</div>
组件 1 HTML
<div class="table-responsive" style="margin-top:30px;font-size:14px;">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Institute </th>
<th>Location </th>
<th>Age </th>
<th>Duration </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hItem of historyItems">
<td>{{hItem.institute}}</td>
<td>{{hItem.location}}</td>
<td>{{hItem.age}}</td>
<td>{{hItem.duration / 60 |round:0 }}</td>
</tr>
</tbody>
</table>
</div>
Component1.ts
import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { Pipe } from '@angular/core';
@Pipe({ name: 'round' })
export class RoundPipe {
transform(input: number) {
return Math.round(input);
}
}
export class HistoryItem {
Institute: string;
JoinUrl: string;
MeetingId: string;
Age: string;
Location: string;
Duration: string;
}
@Component({
selector: 'component1',
templateUrl: 'app/components/Component1.html'
})
export class Component1 implements OnInit {
public historyItems: Array<HistoryItem> = [];
constructor(
private _router: Router
) {
}
ngOnInit() {
}
}
当我使用上述方法中的管道对计算值进行舍入时,出现以下错误。
Error: Uncaught (in promise): Error: Template parse errors: The pipe
'round' could not be found ("{meeting.patientName}}
{{[ERROR ->]meeting.duration / 60 |round:0 }}
您需要在声明下的模块中导入管道
NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
RoundPipe
]
我在属于 Component1 的 html 中有一个计算数字,如下所示。 Component1 用作 bootstrap 选项卡面板中的选项卡页。 这是 html 和标签面板
<div id="minimal-tabs" style="padding:75px;padding-top:60px;font-family:Alef, sans-serif;font-size:20px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-1" role="tab" data-toggle="tab" (click)="requestTabClick()">Requests </a></li>
<li><a href="#tab-2" role="tab" data-toggle="tab" (click)="historyTabClick()">History </a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="tab-1">
</div>
<div class="tab-pane" role="tabpanel" id="tab-2">
<component1></component1>
</div>
</div>
</div>
组件 1 HTML
<div class="table-responsive" style="margin-top:30px;font-size:14px;">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Institute </th>
<th>Location </th>
<th>Age </th>
<th>Duration </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hItem of historyItems">
<td>{{hItem.institute}}</td>
<td>{{hItem.location}}</td>
<td>{{hItem.age}}</td>
<td>{{hItem.duration / 60 |round:0 }}</td>
</tr>
</tbody>
</table>
</div>
Component1.ts
import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { Pipe } from '@angular/core';
@Pipe({ name: 'round' })
export class RoundPipe {
transform(input: number) {
return Math.round(input);
}
}
export class HistoryItem {
Institute: string;
JoinUrl: string;
MeetingId: string;
Age: string;
Location: string;
Duration: string;
}
@Component({
selector: 'component1',
templateUrl: 'app/components/Component1.html'
})
export class Component1 implements OnInit {
public historyItems: Array<HistoryItem> = [];
constructor(
private _router: Router
) {
}
ngOnInit() {
}
}
当我使用上述方法中的管道对计算值进行舍入时,出现以下错误。
Error: Uncaught (in promise): Error: Template parse errors: The pipe 'round' could not be found ("{meeting.patientName}} {{[ERROR ->]meeting.duration / 60 |round:0 }}
您需要在声明下的模块中导入管道
NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
RoundPipe
]