Question

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

Component1 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() {


    }

}

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

错误：未捕获（在承诺中）：错误：模板解析错误：管道＆＃39;轮＆＃39;无法找到（＆＃34; {meeting.patientName}} {{[ERROR - ＆gt;] meeting.duration / 60 | round：0}}

Answer 1

您需要在声明

下导入模块内的管道

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

angular 2以html计算出的数字

1 个答案: