多選下拉控件 - 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初始化為空數組，以便您以后可以填充它。

這是針對您的案例的堆棧閃電戰。

Answer 2

您需要在模板標記maxSelectedLabels屬性設置為“2”，並將selectedItemsLabel為“All selected”。