angular - Hur sätter man som standard valt värde i Angular2-dropdown med hjälp av ng-select?

Jag har använt Angular2 rullgardinsmeny för flera värden med följande kod:

 <ng-select [options]="dropDownSKUNumber" #SKUNumberDrp multiple="true" placeholder="Select SKU Number"  [allowClear]="true"></ng-select>

Denna kod fungerar korrekt för mig vid tiden för att spara flera värden. Men i visningsläge vill jag att dessa värden som standard ska vara valda i dropdown-menyn, men jag kan inte göra detta.

Hur löser man det? med ovanstående kod.

Svar #1

Eftersom du använder alternativ måste du använda detta ng2-select. I så fall bör du binda det till en ngModel och sedan uppdatera det värdet vid initiering av ditt skript:

D.v.s. HTML

<ng-select
    [multiple]="true"
    [options]="myOptions"
    [(ngModel)]="mySelectValue">
</ng-select>

TS

export class App implements OnInit {

    myOptions: Array<any>;
    mySelectValue: Array<string>; // Array of strings for multi select, string for single select.

    ngOnInit() {
        this.myOptions = [
            {value: 'a', label: 'Alpha'},
            {value: 'b', label: 'Beta'},
            {value: 'c', label: 'Gamma'},
        ];
        this.mySelectValue = ['b', 'c'];
    }
}

Svar #2

Enligt angular2 select kan du använda ngModel för att sätta ett initialt värde :

du kan använda options som en array och ngModle för valt värde i din komponent enligt nedan :

//Component 
public dropDownSKUNumber : any[] = [
  { value: 1, label : 1 },
  { value: 2, label : 2 },
  { value: 3, label : 3 }
];
public selectedValue: string[] = [ '2', '3' ];

//HTML
<ng-select [options]="dropDownSKUNumber" #SKUNumberDrp multiple="true" placeholder="Select SKU Number" [(ngModel)]="selectedValue" [allowClear]="true"></ng-select>

Relaterade artiklar