角度 2 舍入 html 中的计算数字答案

【问题标题】：angular 2 round a calculated number in html角度 2 舍入 html 中的计算数字
【发布时间】：2017-11-07 16:45:53
【问题描述】：

我在属于 Component1 的 html 中有一个计算出来的数字，如下所示。 Component1 用作引导选项卡面板中的选项卡页。这是带有标签面板的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() {


    }

}

当我使用上述方法中的管道来舍入计算值时，它会给我以下错误。

错误：未捕获（承诺）：错误：模板解析错误：管道找不到“回合”（“{meeting.patientName}} {{[错误 ->]meeting.duration / 60 |round:0 }}

【问题讨论】：

你添加到模块了吗？显示模块
哪一个？你是说圆管？
是的，你需要在模块中导入
那么我需要创建一个单独的 .ts 文件还是可以使用它，因为我已经将它包含在 Component1.ts 中
你肯定应该已经有了 app.module.ts，就像你导入组件一样添加它

标签： html angular typescript angular-pipe

【解决方案1】：

你需要在声明下导入模块内的管道

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

【讨论】：