databinding - Sette verdien av [(ngModel)] ved første sideinnlasting i Angular 2

Jeg prøver å lage en enkel select-komponent som tar inn noen data via attributter og gjengir de nødvendige alternativene. Jeg planlegger å bruke denne select-komponenten inne i malen til en annen komponent, for eksempel PageComponent-malen (page.template.html).

Jeg binder en variabel i PageComponent til select-komponenten ved hjelp av [(ngModel)]. Når jeg velger et alternativ, oppdateres verdien av variabelen som forventet, men hvordan kan jeg sette den til å peke på det første alternativet ved sideinnlasting uten å utløse et manuelt valg på select-komponenten?

Her er koden.

I page.template.html

<select ui-select 
        [options]="options" 
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'">
</select>
{{alertType}} <!-- To see the value while debugging -->

I page.component.ts, PageComponent-klasse

alertType:any;
options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

I select.component.ts

import {Component, Input} from '@angular/core'

@Component({
  selector: '[ui-select]',
  template: `
    <option *ngIf="defaultValue" value="-1">{{defaultValue}}</option>
    <option *ngFor="let option of options" [value]="option.id">{{option.value}}</option>
  `
})
export class SelectComponent {
  @Input() options: any;
  @Input() defaultValue: string;
}

Akkurat nå viser verdien {{alertType}} ingenting i starten og oppdateres først når man velger et nytt alternativ fra select-boksen.

Jeg forstår at det skjer fordi alertType er satt til undefined som standard i PageComponent, men jeg klarer ikke å finne ut hvordan jeg setter det til den første alternativverdien når siden lastes.

Oppdatering

Det opprinnelige spørsmålet har blitt besvart, men jeg hadde ett spørsmål til angående dette, så jeg oppdaterte spørsmålet.

I den oppdaterte koden godtar select-komponenten en defaultValue-egendefinert egenskap fra malen og gjengir en betinget <option> for den standardverdien.

Nå, hvordan sier jeg at hvis defaultValue er satt, skal alertType ha den verdien, ellers skal det ha verdien til det første elementet i options-listen.

P.S - Hvis du har kommentarer om tilnærmingen som ble brukt for å bygge komponenten, vennligst legg dem til i svarene, da det vil hjelpe meg å lære.

Svar #1

Så du vil at alertType skal settes til den valgte verdien, enten det kan være fra dine oppgitte options eller fra din defaultValue (første alternativ).

dette kan gjøres ved å bruke AfterViewInit-hooken,

den modifiserte koden vil være..

@Component({  
  selector: 'my-app',
  directives:[ 
    SelectComponent
  ],
  template : `<select ui-select
        [options]="options"
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'" #mySelect>
</select>
{{alertType}}`
})
export class App implements AfterViewInit{
  @ViewChild('mySelect', {read: ViewContainerRef}) mySelect;
options = [
    {id: 1, value: "item-1", selected: false},
    {id: 2, value: "item-2", selected: true},//if all options will be false then defaultValue will be selected
    {id: 3, value: "item-3", selected: false}
];
alertType: any;

 ngAfterViewInit() {
    this.alertType = this.mySelect.element.nativeElement.value;
  }

}

Jeg har laget en plunker, sjekk dette!!

Svar #2

Du kan prøve det slik:

options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

alertType: any = options[0].id;

Relaterte artikler