找不到“权限”管道？答案

【问题标题】：'permission' pipe could not be found?找不到“权限”管道？
【发布时间】：2019-03-12 13:45:35
【问题描述】：

在step by step dev 之后，我正在尝试隐藏未经授权的按钮。

这是按钮的代码，在 phoneBook.component.html 中：

<button *ngIf="'Pages.Tenant.PhoneBook.CreatePerson' | permission" class="btn btn-primary" (click)="createPersonModal.show()"><i class="fa fa-plus"></i> {{l("CreateNewPerson" | localize)}}</button>

当我运行项目时，我在控制台中收到该错误：

ERROR Error: "Uncaught (in promise): Error: Template parse errors:
   The pipe 'permission' could not be found ("
        </div>

        <div class="col-sm-6 text-right">
              .......

我该如何解决这个问题？

【问题讨论】：

您之前是否在代码中创建过管道？
你在*.module.ts中声明了管道吗？
不，我没有创建管道，也没有在 *.module.ts 中声明它。我只是按照一步一步开发
见Angular - Pipes 该页面某处注明：You must include your pipe in the declarations array of the AppModule.

标签： angular aspnetboilerplate

【解决方案1】：

Custom pipes need to be created and imported into module. 管道可以这样使用：

<button *ngIf="(Pages?.Tenant?.PhoneBook?.CreatePerson' | permission).length === 0" 
    class="btn btn></button>

那么你的管道应该是这样的：

@Pipe({name: 'permission'})
export class PermissionPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    ...
    return ...;
  }
}

以及模块中的声明：

import { LabTestService } from './lab-test/lab-test.service';
import { PermissionPipe } from './...';

@NgModule({
    declarations: [
        AppComponent,
        PermissionPipe 
    ],
    imports: [
        NgbModule.forRoot(),
        BrowserModule,
        FormsModule        
    ],
    ...
    bootstrap: [ AppComponent ]
})
export class AppModule { }

【讨论】：

你的意思是我需要创建管道？文档中没有提到这一点
@A.HADDAD 是的，你不能在不创建管道的情况下使用管道。请阅读此文档angular.io/guide/pipes
@A.HADDAD 如果是内置管道，那么可以，可以使用这样的管道。但是，需要创建自定义管道并将其导入模块。我已将此添加到我的回复中。

【解决方案2】：

在 ASP.NET 零基础解决方案 v6.7.0 中提供了管道定义。

如果您使用的是旧版本，您可以查看相应版本的文档： https://docs.aspnetzero.com/documents/zero/v6.6.0/Developing-Step-By-Step-Angular#hide-unauthorized-button

这是来自aspnetzero/documents@bccbc7a 的差异（截断）：

- *ngIf="isGranted('Pages.Tenant.PhoneBook.CreatePerson')"
+ *ngIf="'Pages.Tenant.PhoneBook.CreatePerson' | permission"

【讨论】：

谢谢大厨给我的项目，如何找到它的版本？
如果没有被替换，它在 AppVersionHelper.cs 中。

【解决方案3】：

在您的链接代码中，他们使用“权限”作为数据。

所以我认为他们做错了。他们不想在这里有一个管道，而是从后面有一个布尔数据。

所以可能是<div *ngIf="... || permission">

（他们的 github 链接已失效，因此无法获得干净的代码）

【讨论】：

不，我不认为这是一个错误，如果用户没有权限，则按钮应该消失，而您的代码不是这样
我不能说。但是如果他们在组件中定义了权限，那么它就是<div *ngIf="... || permission">（或者 && 或者 !permission，我不知道）