22

テンプレートに次のコードがあります。

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

私のコンポーネントでは：

public selectedSubSectionId: any;

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

これは問題なく機能しますが、最初は空のボックスがあります。そこにプレースホルダーメッセージを表示したい。ngModel を使用してこれを行うにはどうすればよいですか?

4

5 に答える 5

33

私の解決策：

コンポーネント typescript ファイルでは、初期化しないプロパティ selectUndefinedOptionValue を追加し、html では undefinedSelectOptionValue をプレースホルダー オプションの値として追加します。このソリューションは、数値モデル プロパティと文字列モデル プロパティの両方で機能します。

@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>

于 2016-12-23T15:04:15.700 に答える