p-message(KeyFilter Module) 不是 Angular 6 中的已知元素

Question

当我尝试从 Prime-NG UI 组件中的 KeyFilterModule 发送 p-message 时 Angular 6 并安装了以下软件包作为参考：

npm -v 6.1.0

>ng -v Angular命令行界面：6.0.8 节点：8.11.3 OS: win32 ia32 Angular: 6.0.9

请查找下面使用的代码并抛出错误。

HTML 文件：

      <input type="text" formControlName="UniqueNumber" class="form-control" id="UniqueNumber" name="UniqueNumber" placeholder="Patient Unique Number"
       pInputText [pKeyFilter]="ccRegex" [pValidateOnly]="true" placeholder="123-12-1234" />
       <p-message severity="error" text="Not a valid number" [@errorState]="form.dirty && !form.valid ? 'visible' : 'hidden'"></p-message> 
    </div>

ts代码： ccRegex：RegExp = /[0-9]{3}-[0-9]{2}-[0-9]{4}$/;

我明白了，KeyFilterModule 是在 Angular 6 中新引入的。对此非常感谢任何帮助。

谢谢！

Answer 1

我刚遇到同样的问题。确保在您的应用中导入 KeyFilterModule

import { TableModule } from 'primeng/table';
import { MessagesModule, KeyFilterModule } from 'primeng/primeng';

NgModule({
  imports: [
    ...
    TableModule,
    MessagesModule,
    KeyFilterModule
  ],
  exports: [
    ...
    TableModule,
    MessagesModule,
    KeyFilterModule
  ]
})

Answer 2

我试图导入 messagesmodule，但我应该使用 messagemodule。

import { TableModule } from 'primeng/table';
import { MessageModule, KeyFilterModule } from 'primeng/primeng';

NgModule({
  imports: [
    ...
    TableModule,
    MessageModule,
    KeyFilterModule
  ],
  exports: [
    ...
    TableModule,
    MessageModule,
    KeyFilterModule
  ]
})

感谢指点@Lee.Winter！同样感谢您的帮助。

Answer 3

以下是您应该如何实施它 1. 在您的组件文件中，添加此导入并声明您的数组

import {Message} from 'primeng/components/common/api';
msg: Message[] = [];

在你的 ngOninit() 中，添加这个

this.msg
        .push({
            severity: 'warn',
            summary: 'WarningStatus',
            detail: 'You have not entered all the required data.'
        });

添加删除横幅的清除功能

clear() {
        this.msg = [];
    }

在你的 html 中添加这个

<p-messages [(value)]="msg" [closable]="false" (onClick)="clear()"></p-messages>

p-message(KeyFilter Module) 不是 Angular 6 中的已知元素

p-message(KeyFilterModule) is not a known element in Angular6

primeng

angular

angular6