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
}

参考方案

存在数据（Constructor，OnInit ..）时，请尝试以下操作：

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

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

Here is a stackblitz针对您的情况。

如果我得到url('')，我该如何使用另一个URL - javascript

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

对ID为'abc％'的dom执行操作 - javascript

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

Jsonp没有出现``访问控制允许来源''错误 - javascript

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

Angular JS ng-repeat无法通过PHP数组获取输出 - javascript

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

Javascript IF语句 - javascript

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