学习Primeng Angular ListBox |p-listbox实例

ListBox是一个图形化的用户组件，它显示一个元素的列表，用户可以从中一次选择多个元素。

ListBox还可以显示可选的复选框。

首先使用angular cli命令从头开始创建一个angular应用程序。

并将primeng库集成到Angular应用程序中

如果你不确定如何做，你可以查看以下内容。

一旦primeng被安装到应用程序中，应用程序就可以运行了。你可以将ListboxModule ，导入到Angular应用程序中。

ListboxModule 这是一个Angular模块，用于从primeng框架中获取列表框组件和指令。

在应用程序模块中添加ListboxModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ListboxModule } from 'primeng/listbox';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ButtonModule,
    ListboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular ListBox例子

首先，创建一个模型对象，定义如下role.ts

interface Role {
    name: string,
    value: string
}
export default Role;

将模型导入angular组件中

import Role from './model/Role';

在typecript组件中。以下是步骤

• 声明roles 模型对象
• selectedRole 类型为any ，以保存列表框的选择值。
• 用静态数据初始化roles 对象，或从API中提取。

import { Component } from '@angular/core';
import Role from './model/Role';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = "Primeng listbox example"
  roles: Role[];
  selectedRole: any;
  constructor() {
    this.roles = [
      { name: 'Administrator', value: 'ADMIN' },
      { name: 'Sales', value: 'SALE' },
      { name: 'Marketing', value: 'MKT' },
      { name: 'HR', value: 'HR' },
      { name: 'Finance', value: 'FIN' },
    ]
  }


}

selectedRole 使用带有 ngModel属性的双向绑定方法声明。

当用户在列表框中选择一个项目时，它持有角色对象。

这里是模板组件:

<h1>{{title}}</h1>

<p-listbox [options]="roles" [(ngModel)]="selectedRole" optionLabel="name"></p-listbox>

<p>Selected Role: {{selectedRole ? selectedRole.name : 'none'}}</p>

输出:

如何在页面加载时选择默认的列表框项目？

在上面的例子中，选定的列表框元素被填充为selectedRole 对象。

在构造函数中，请赋值给

  constructor() {
    this.selectedRole = this.roles[0];
  }

这将通过编程方式选择列表框的第一个元素。

如何用复选框显示列表框

这个例子增加了以下功能

• 选择多个元素
• 在列表框中添加复选框
• 过滤一个项目

typecript组件:

import { Component, OnInit } from '@angular/core';
import Role from '../model/Role';

@Component({
  selector: 'app-listbox-checkbox',
  templateUrl: './listbox-checkbox.component.html',
  styleUrls: ['./listbox-checkbox.component.scss']
})
export class ListboxCheckboxComponent implements OnInit {
  title = "Primeng listbox checkbox example"
  roles: Role[];
  selectedRoles: Role[];
  constructor() {
    this.roles = [
      { name: 'Administrator', value: 'ADMIN' },
      { name: 'Sales', value: 'SALE' },
      { name: 'Marketing', value: 'MKT' },
      { name: 'HR', value: 'HR' },
      { name: 'Finance', value: 'FIN' },
    ];
  }
  ngOnInit(): void {
  }

}

模板组件:

<h1>{{title}}</h1>
<p-listbox [options]="roles" [(ngModel)]="selectedRoles" [metaKeySelection]="false" [checkbox]="true" [multiple]="true"
    [filter]="true" optionLabel="name" [listStyle]="{'max-height':'250px'}" [style]="{'width':'15rem'}">
    <ng-template let-country pTemplate="item">

        <div>{{country.name}}</div>

    </ng-template>
</p-listbox>
{{selectedRoles|json}}

输出:

p-listbox因为一个错误而无法工作

以下是集成到primeng listmodule时经常出现的错误

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

Error: src/app/app.component.html:3:30 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'p-listbox'.
1. If 'p-listbox' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-listbox' 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.

3 

解决方法是

在app.module.ts中添加formModule。

import { FormsModule } from '@angular/forms';

下面是一个完整的代码。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ListboxModule } from 'primeng/listbox';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ListboxModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }