Jak wyświetlić symbol zastępczy (pusta opcja) w kontrolce select w Angular 2?

Question

Mam ten kod w moim szablonu:

<select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)"> 
    <option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option> 
</select> 

W moim komponent:

public selectedSubSectionId: any; 

public onSubSectionChange(subSectionId: any) { 
    // some code I execute after ngModel changes. 
} 

to działa ok, ale na początku mam puste pole. Chcę pokazać tam wiadomość zastępczą. Jak mogę to zrobić, używając narzędzia ngModel?

Answer 1

Moje rozwiązanie:

W pliku składnik maszynopis dodaję selectUndefinedOptionValue właściwość, że nie zainicjować i html dodam undefinedSelectOptionValue jako wartości danej opcja zastępcza. To rozwiązanie działa zarówno dla właściwości liczbowych, jak i łańcuchowych.

@Component({ 
 
    selector: 'some-component-selector', 
 
    templateUrl:'url to template', 
 
}) 
 
export class SomeComponent implements OnInit { 
 
    private selectUndefinedOptionValue:any; 
 
    private someObject:SomeObject; 
 
    
 
    ngOnInit() { 
 
     someObject = new SomeObject(); 
 
    } 
 
}

<select [(ngModel)]="someObject.somePropertyId"> 
 
    <option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option> 
 
    <option *ngFor="let option of options" [value]="option.id">option.text</option> 
 
</select>

Answer 2

Czy próbowałeś wstawić placeholder="Your placeholder string" do znacznika wyboru lub opcji?

Zakładam, że ciąg znaków można zastąpić zmienną, jeśli nie chcesz, aby łańcuch był sztywny w widoku.

Answer 3

wypróbować ten kod:

<select [ngModel]="selectedSubSectionId? selectedSubSectionId : ''" (ngModelChange)="onSubSectionChange($event)"> 
    <option value="" disabled selected hidden>Placeholder</option> 
    <option *ngFor="let subSection of event.subSections" [value]="subSection.id">{{ subSection.name }}</option> 
</select> 

Answer 4

Dodaj pusty opcję i ustawiony na 'nieokreślony' może być również dodać do wartości zerowej zbyt

<select [(ngModel)]="barcode"> 
    <option value="undefined" disabled selected hidden>Select</option> 
    <option value="null" disabled selected hidden>Select</option> 
    <option *ngFor="let city of turkiye" [ngValue]="city.id">{{city.name}}</option> 
</select> 

Answer 5

mam to samo pytanie, a ja znalazłem przykład w ta wspaniała strona internetowa: Angular Quick Tip

również, umieszczam przykład poniżej:

// template 
<form #f="ngForm"> 
    <select name="state" [ngModel]="state"> 
    <option [ngValue]="null">Choose a state</option> 
    <option *ngFor="let state of states" [ngValue]="state"> 
     {{ state.name }} 
    </option> 
    </select> 
</form> 

//component 
state = null; 

states = [ 
    {name: 'Arizona', code: 'AZ'}, 
    {name: 'California', code: 'CA'}, 
    {name: 'Colorado', code: 'CO'} 
]; 

współpracuje także z reaktywnych form, to co używam:

// template 
<div class="form-group"> 
    <select formControlName="category"> 
    <option [ngValue]="null">Select Category</option> 
    <option *ngFor="let option of options" 
      [ngValue]="option">{{option.label}}</option> 
    </select> 
</div> 

// component 
options = [{ id: 1, label: 'Category One' }, { id: 2, label: 'Category Two' }]; 

form = new FormGroup({ 
    category: new FormControl(null, Validators.required) 
}); 

Dzięki Netanel Basal aby dostarczyć odpowiedzi