区块链技术博客
www.b2bchain.cn

Multiselect下拉控件-Primeng-Angular 6-默认情况下在页面加载时选择所有选项,并将它们显示为选定标签 – javascript程序员分享

本文介绍了Multiselect下拉控件-Primeng-Angular 6-默认情况下在页面加载时选择所有选项,并将它们显示为选定标签 – javascript程序员分享,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

我有一个启动的多选下拉控件。在页面加载时,应选择所有选项,并且所选标签应显示“所有选定内容”。如何在启动多选控件时获取“全选”复选框状态?

选择所有选项后,下拉菜单将显示3个选项。

在这里,而不是选择的3个项目,它应该显示“全部”。默认情况下,页面加载时应选择所有选项。帮助解决这个问题。

AppComponent.html          <div id="statusdrpdown" #statusdropdown>           <p-multiSelect [options]="status" [(ngModel)]="selectedStatus" [maxSelectedLabels]="1" class="multiselectcss" [filter]="false" (onPanelShow) =" funShow()"  optionLabel="name"></p-multiSelect>           <label id="statuslbl" class="drpdownlbl"><br />Status</label>         </div>       ----------------------------------------------------------------------------     App.Component.ts          import { Component , ViewChild, ElementRef} from '@angular/core';         import { SampleData } from './sample-data';         @Component({          selector: 'my-app',          templateUrl: './app.component.html',          styleUrls: [ './app.component.css' ]         })         export class AppComponent  {           @ViewChild("statusdropdown", { read: ElementRef }) tref: ElementRef;            status: SampleData[];            selectedStatus: SampleData[];           constructor() { }            ngOnInit() {             this.status = [           { name: 'Active', value: '1' },               { name: 'Inactive', value: '2' },               { name: 'Status-complete-or-active', value: '3' },         ];       }       funShow() {         var h = this.tref.nativeElement;         var text = document.createTextNode("All");         h.childNodes[0].lastChild.lastChild.childNodes[1].childNodes[1].after(text);       }     }      --------------------------------------------------------------------------      App.module.ts     import { NgModule } from '@angular/core';     import { BrowserModule } from '@angular/platform-browser';     import { FormsModule } from '@angular/forms';      import { AppComponent } from './app.component';     import { HelloComponent } from './hello.component';     import { MultiSelectModule } from 'primeng/multiselect';      import { BrowserAnimationsModule } from '@angular/platform-browser/animations';       @NgModule({       imports:      [ BrowserModule, FormsModule, MultiSelectModule, BrowserAnimationsModule],       declarations: [ AppComponent, HelloComponent ],       bootstrap:    [ AppComponent ]     })     export class AppModule { } 
Primeng version - in package.json 

“ primeicons”:“ ^ 1.0.0”,
        “ primeng”:“ ^ 7.0.0-beta.1”

SampleData interface -   export interface SampleData {     name: string,     value: string } 

参考方案

存在数据(ConstructorOnInit ..)时,请尝试以下操作:

   this.status.map((item) => this.selectedStatus.push(item)); 

PS:并且不要忘记将selectedStatus初始化为空数组,以便以后填充它。

Here is a stackblitz针对您的情况。

我是新手,正在写这篇文章,但是如果源上没有图像,那么我只有空白。有人可以告诉我,如果我正在获取背景图像,如何获取/images/no-image.jpg:url();这是我的代码:<div class="uk-clearfix uk-position-relative"> <div class="recipeb…

我想对ID为’abc%’的DOM进行一些操作<a id='abc1'></a> <a id='abc2'></a> <a id='abc3'></a> <a id='abc4'></a&gt…

在我的PHP中,我喜欢这样来回显jsonp类型的“ json数据”echo $_GET['callback'] . '('.json_encode($arr).')'; 在我的js(angularjs)中,$http.get('http://example.com/app/?callbac…

我是Angular JS的新手,我想在ng-repeat中显示一个php数组。这是我的html代码,<div ng-controller="clientList"> <ul> <li ng-repeat="client in clients"> <h2>{{client.…

                        嗨,我有这段代码可以正常工作,并将两个日历显示为一个日历。我还有一个php变量$login_session,其中包含登录电子邮件地址的用户。关于如何显示日历的任何想法(伪代码)IF $login_session == "&#…

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Multiselect下拉控件-Primeng-Angular 6-默认情况下在页面加载时选择所有选项,并将它们显示为选定标签 – javascript程序员分享
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们