javascript - 多选下拉控件 - Primeng - Angular 6 - 在页面加载时默认选择所有选项并将它们显示为选定标签

Question

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

选择所有选项后，下拉列表将显示 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
}

Answer 1

当您的数据存在时尝试此操作(Constructor、OnInit ..):

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

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

Here is a stackblitz针对您的情况。