Primeng下拉组件 | Angular下拉列表常见问题及其解决方法实例

迪鲁宾
1,089 阅读6分钟

在本教程中，我们将通过实例来学习Primeng Dropdown的基础知识。

dropdown 是一个显示元素列表的UI元素，它允许用户从元素列表中选择一个元素。

这些元素可以是普通字符串、JSON数组或javascript对象。

Primeng 有一套丰富的UI元素，用于Agular框架的typecript，来自 Primefaces团队。

你可以查看我之前关于primeng框架的文章。

初步的Angular下拉功能

以下是支持的内置功能的列表

  • 自定义外观和感觉样式
  • 使用ngTemplate自定义内容和标签
  • 使用REST API进行远程绑定
  • 过滤
  • 分组

有了以上所有功能的支持，开发者的工作就很容易集中在业务功能上。此外，你将得到经过全面测试的组件。

本教程将适用于不同的angular版本10/11/12/13的typecript语言。11和12版本是推荐的版本，因为这些是最新的支持版本。

本教程涵盖了将primeng dropdown整合到现有的angular应用程序中。

首先使用npm命令安装primeng的依赖项primeng 和primeicons。

npm install primeng --save
npm install primeicons --save
npm install @angular/cdk --save

以上代码安装了依赖项，并在package.JSON中建立了一个条目。

primeng模块以模块的形式提供各种组件。

例如，DropdownModule 是一个angular模块，提供下拉或选择框组件。

primeicons npm module 它提供了由primefaces团队提供的图标。

请查看[add icons to primeng](/prime-icons-list/) 这个帖子，为你的模块添加图标支持。这是重要的一步，如果配置不正确，图标就不能正确可见。

@angular/cdk - 如果需要在下拉菜单中支持滚动，则需要这个npm模块。

在style.css中配置css样式

@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-dark/theme.css";
@import "~primeng/resources/primeng.min.css";

通过以上步骤，primeng npm 模块已经成功安装在你的应用程序中。

Primeng以angular模块的形式提供每个组件。因此，导入DropdownModule 到你的应用程序，如下所示

在你的app.module.ts 的导入部分配置好DropdownModule 。

之后，所有Primeng的下拉组件/指令都可以在你的应用程序中使用。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DropdownModule} from 'primeng/dropdown'; // include this for dropdown support
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropdownModule // dropdown support
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

这是对你的应用程序的一次处理。

现在，你已经准备好创建第一个下拉列表的例子了。

下拉示例

首先，使用ng g c nameofcomponent 命令创建一个简单的angular basic-dropdown.component。

这将在现有的应用程序中创建以下文件

  • basic-dropdown.component.html
  • basic-dropdown.component.ts文件
  • basic-dropdown.component.css

basic-dropdown.component.ts 文件

这是一个处理UI元素显示逻辑的typescript组件文件。

下面是添加typescript逻辑的一系列步骤。

  • 首先，创建Array类型的雇员对象列表SelectedItem 。
  • Primeng下拉菜单支持SelectedItem 或自定义数组的对象。默认情况下，它支持SelectedItem
  • 每个SelectedItem ，只接受key=label ，value=value 。
  • 我们将在下一个例子中介绍，如果对象是自定义类型，而不是name 和value 。
  • 在构造函数中，employes对象被创建并以固定值初始化。
  • selectedEmployee 是一个用来保存所选下拉值的对象，这是为这个变量添加双向绑定引用的方式。

下面是一个组件的例子

import { Component, OnInit } from "@angular/core";
import { SelectItem } from "primeng";

@Component({
  selector: "app-basic-dropdown",
  templateUrl: "./basic-dropdown.component.html",
  styleUrls: ["./basic-dropdown.component.css"]
})
export class BasicDropdownComponent implements OnInit {
  employes: SelectItem[];
  selectedEmploye: SelectItem;

  constructor() {
    this.employes = [
      { label: "Select Employee", value: null },
      { label: "Franc", value: 1 },
      { label: "Kiran", value: 2 },
      { label: "John", value: 3 }
    ];
  }

  ngOnInit() {}
}

在basic-dropdown.component.html 文件中:

这是html模板组件文件，它在浏览器上显示实际的组件。

在这个文件中，p-dropdown 组件被用在这个 html 文件中，它有一个option 属性

Option 属性接受项目数组，这里使用了 对象， 对象包含 和 ，从下拉菜单中选择的项目使用 和 的对象来填充。SelectItem SelectItem label value selectedEmployee SelectedItem

selectedEmployee 使用ngModel ，以双向绑定的方式映射到组件，在组件和Html元素之间分配数据。

<p>Simple Dropdown Example</p>

<p-dropdown [options]="employes"   [(ngModel)]="selectedEmploye"></p-dropdown>

<br>
<p>selected Employe: {{selectedEmploye? selectedEmploye.name:'none' }}</p>

上述代码的输出是Angular 12 primeng Dropdown example

下拉式选项标签示例

在上面的例子中，覆盖了一个对象的默认格式label 和value 。

在实时应用中，映射到下拉菜单的数据是不同的格式。

假设，我们有一个countries 的集合，每个country 都包含name 和code 的属性。

OptionLabel 属性被用来将自定义标签与一个对象的数据进行映射。

下面是一个下拉式OptionLabel的使用例子


Selected Country: {{selectedCountry? selectedCountry.name:'none' }}

在typecript组件代码中:

  countries:Country[];
  selectedCountry: Country;
    this.countries = [
      {name: 'India', code: 'IND'},
      {name: 'United States of America', code: 'USA'},
      {name: 'United Kingdom', code: 'UK'},
    ];

ng-template自定义标签和内容

你也可以使用ng-template 来定制默认行为。默认行为是在下拉菜单上显示标签。

有三个模板--

  • selectedItem template:显示的标签可以自定义显示图标、样式。
  • item template: 自定义用户界面中的内容。
  • group template: 自定义选项组的默认行为。

还有其他功能filter - 按显示名称过滤，Group - 在显示的类别下对元素进行分组。

下拉式风格和图标变化

我们还可以自定义/覆盖默认的样式和图标。

有一个预定义的样式可以改变它。ui-dropdown-trigger 这将背景颜色覆盖为绿色

body .ui-dropdown .ui-dropdown-trigger {
    background-color: green;
}

例如，要改变图标，你必须使用dropdownIcon 属性的类型脚本组件，声明如下

export class AppComponent {
customIcon="fa fa-search";
}

在HTML中使用p-dropdown 标签的dropdownIcon 属性，如下所示

重要事件和属性

  • appendTo:这里的元素是一个主体或任何元素。有了这个，我们就可以避免滚动了

  • onClick:当组件被点击时，事件回调被调用。

  • onChange:当下拉值发生变化时，这将被调用。

  • onFocus ：当下拉菜单获得焦点时被调用

  • onBlur 当dropdown的焦点从这里转移到页面中的其他元素时被调用。

如何修复CUSTOM_ELEMENTS_SCHEMA Angular错误？

在应用程序中配置下拉菜单时，我们曾经得到以下错误

不能绑定到'ngModel'，因为它不是'p-dropdown'的已知属性。

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'p-dropdown'.
1. If 'p-dropdown' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   

Basci Dropdown
][(ngModel)]="selectedEmploye" name="selectedEmploye" placeholder="Select a Employe" optionLabel="name"): ng:///AppModule/AppComponent.html@6:33
    at syntaxError (compiler.js:1016)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14813)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:23992)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:23979)
    at compiler.js:23922
    at Set.forEach ()
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23922)
    at compiler.js:23832
    at Object.then (compiler.js:1007)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23831)

修复这个异常

原因是p-dropdown，因为HTML标签被定义为angular组件，它是自定义的HTML标签，而不是html5内置的标签，所以我们在组件中使用。

如果组件的名称包含破折号（-），那么我们需要做以下事情。

你可以在组件或模块中添加CUSTOM_ELEMENTS_SCHEMA作为模式装饰器。

我将把它添加到app.module.ts ，它适用于该模块中的所有组件。


import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]

总结

这就是学习angular primeng下拉式实例的常见问题及其解决方法。

avatar
文章
阅读
粉丝