angular 2 舍入 html 中的计算数字

Question

我在属于 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 }}

Answer 1

您需要在声明下的模块中导入管道

NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        RoundPipe 
    ]

angular 2 舍入 html 中的计算数字

angular 2 round a calculated number in html

html

angular

typescript

angular-pipe