我正在尝试创建一个自定义管道,该管道将返回表中数组的总和,但无论出于何种原因,Angular 都在提示我的管道没有“emod”属性。
我的管道:
import { Injectable, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'fieldSum',
pure: false
})
@Injectable()
export class FieldSumPipe implements PipeTransform {
transform(items: any[], attr: string): number {
return items.reduce((a, b) => a + b[attr], 0);
}
}
我的模块:import { SomeComponent} from './some.component';
import { SomeRoutingModule} from './some-routing.module';
import { FieldSumPipe } from '../../../shared/pipes/fieldsum.pipe';
// Other imports...
@NgModule({
imports: [
CommonModule,
SomeRoutingModule,
FieldSumPipe, // other imports removed for brevity
],
declarations: [
SomeComponent,
],
exports: [
FieldSumPipe
]
})
export class SomeModule { }
我的组件 HTML: <table class="table table-striped table-hover table-responsive-lg" [mfData]="tableData" #mf="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.data">
<td>{{ item.Id }}</td>
<td>{{ item.Name }}</td>
<td>{{ item.Something }}</td>
<td>{{ item.Profit }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td>{{ mf.data | fieldSum:'Profit' }}</td>
</tr>
</tfoot>
</table>
VS Code 声称 The pipe 'fieldSum' could not be found
,但它确实成功编译了所有内容并设法在浏览器中打开。但是,当我单击应该加载我的组件的任何内容时,控制台会显示错误。core.js:4442 ERROR Error: Uncaught (in promise): Error: Type FieldSumPipe does not have 'ɵmod' property.
Error: Type FieldSumPipe does not have 'ɵmod' property.
at getNgModuleDef (core.js:1855)
at recurse (core.js:24235)
at recurse (core.js:24246)
at registerNgModuleType (core.js:24231)
at new NgModuleFactory$1 (core.js:24345)
at Compiler_compileModuleSync__POST_R3__ (core.js:27135)
at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (core.js:27140)
at MergeMapSubscriber.project (router.js:3506)
at MergeMapSubscriber._tryNext (mergeMap.js:44)
at MergeMapSubscriber._next (mergeMap.js:34)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27533)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
我不确定它是否以任何方式相关,但我的 SomeModule 是在 AppRoutingModule 中延迟加载的。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
data: {
title: 'Whatever',
},
children: [
{
path: 'some',
loadChildren: () =>
import('./some/some.module').then((m) => m.SomeModule),
}
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
最佳答案
事实证明,解决方案是将 FieldSumPipe 放入 declarations
和 exports
我的模块而不是 imports
.
import { SomeComponent} from './some.component';
import { SomeRoutingModule} from './some-routing.module';
import { FieldSumPipe } from '../../../shared/pipes/fieldsum.pipe';
// Other imports...
@NgModule({
imports: [
CommonModule,
SomeRoutingModule, // other imports removed for brevity
],
declarations: [
FieldSumPipe,
SomeComponent,
],
exports: [
FieldSumPipe
]
})
export class SomeModule { }
关于Angular - 管道类型没有 'ɵmod' 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66005232/