[英]How to add an option text in a drop down list?
我有一个下拉列表,我想在用户选择他的国家之前显示“选择国家”。
我试过这条线:
<option data-hidden="true">
Choose Country
</option>
但是,下拉列表中未提及该短语。
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="filterCountries" class="form-label">Country</label>
</div>
<div class="col-4">
<select id="filterCountries" name="filterCountries" class="form-select" [(ngModel)]="search.country">
<option data-hidden="true">
Choose Country
</option>
<option *ngFor="let country of countries" [value]="country.id">
{{ country.name }}
</option>
</select>
</div>
</div>
编辑
我怎样才能使search.country
变成字符串? 因为它是一个 integer?
搜索-dta.ts
export class SearchDta {
registreNational: number;
fiscalYear: number;
country: number;
constructor(
registreNational: number = 0,
fiscalYear: number = 0,
country: number = 0,
) {
this.registreNational = registreNational;
this.fiscalYear = fiscalYear;
this.country = country
}
}
TS
export class SearchDtaComponent implements OnDestroy {
private unsubscribe$ = new Subject < void > ();
@Input() mode: string = "";
@Input() title: string = "";
@Input() canSelectAllTitles: boolean = false;
@Input() showWarnings: boolean = false;
@Input() disabledSvm: number[] = [];
@Input() saveState: Observable < string > = new Observable < string > ();
@Input() url: string = '';
@Input() from ? : string;
isModal: boolean = false;
markets$ = this.service.markets$;
search: SearchDta = new SearchDta();
data ? : SearchDtaResponse;
countries: Country[] = [];
@Output() selectedPersonnePhysiqueDta = new EventEmitter < PersonnePhysiqueDta | undefined > ();
@Output() changedState = new EventEmitter < SearchDta > ();
constructor(private service: SearchDtaService, private modalService: BsModalService, private router: Router) {}
ngOnInit() {
this.saveState.subscribe((url) => localStorage.setItem(url + '.search', JSON.stringify(this.search)));
const search = localStorage.getItem(this.url + '.search');
if (search) {
this.search = JSON.parse(search);
localStorage.removeItem(this.url + '.search')
}
this.service.getPaysDta().pipe(
takeUntil(this.unsubscribe$)
).subscribe((countries) => this.countries = countries);
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
submit(): void {
if (!this.isModal) {
const modalRef = this.modalService.show(SearchDtaResultModalComponent, {
...SEARCH_TITLE_MODAL_OPTIONS,
initialState: {
title: this.title,
isLoading: true,
disabledSvm: this.disabledSvm,
showWarnings: this.showWarnings
}
});
modalRef.content!.selectedPersonnePhysiqueDta.pipe(
takeUntil(this.unsubscribe$)
).subscribe((val: PersonnePhysiqueDta | undefined) => {
this.selectPersonnePhysiqueDta(val);
if (this.mode === 'create') {
this.router.navigate([
"/dta/create/" +
val?.NUMEROREGISTRENATIONAL +
"/" +
this.search.country +
"/" +
this.search.fiscalYear
]);
} else if (this.mode === 'delete') {
this.router.navigate([
"/dta/delete/" +
val?.NUMEROREGISTRENATIONAL +
"/" +
this.search.country +
"/" +
this.search.fiscalYear
]);
} else {
this.router.navigate([
"/dta/follow-up/" +
val?.NUMEROREGISTRENATIONAL +
"/" +
this.search.country +
"/" +
this.search.fiscalYear
]);
}
modalRef?.hide();
});
this.searchDta(true).pipe(
takeUntil(modalRef.content!.selectedPersonnePhysiqueDta)
).subscribe(res => {
if (modalRef) {
modalRef.content!.isLoading = false;
modalRef.content!.personnePhysique = res.DTA.PP;
if (!res.DTA.PP) {
modalRef.hide();
}
}
});
} else {
this.searchDta(false).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
this.data = res;
});
}
}
private searchDta(hideLoading: boolean): Observable < SearchDtaResponse > {
return this.service.searchDta(this.search, hideLoading).pipe(
takeUntil(this.unsubscribe$)
);
}
selectPersonnePhysiqueDta(personnePhysiqueDta: PersonnePhysiqueDta | undefined = undefined): void {
this.selectedPersonnePhysiqueDta.emit(personnePhysiqueDta);
}
changeState(): void {
this.changedState.emit(this.search);
}
}
当您引用 NgModel 时,传入 html 的第一个数据将是初始化的数据。
export class AppComponent {
country = 'Choose Country';
countries = ['Canada', 'US', 'Mexico'];
}
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="filterCountries" class="form-label">Country</label>
</div>
<div class="col-4">
<select id="filterCountries" name="filterCountries" class="form-select" [(ngModel)]="country">
<option data-hidden="true" disabled>Choose Country</option>
<option *ngFor="let country of countries" [value]="country">
{{ country }}
</option>
</select>
</div>
</div>
Stackblitz 参考: https://angular-ivy-svadk2.stackblitz.io
正如其他人所说,我还建议使用“禁用”道具将“选择国家/地区”选项设置为不可选择。
/编辑新问题
为什么你想要它作为一个字符串? 在您的搜索 DTA 中,您似乎想要一个数字。 所以如果你真的想要一个字符串,你需要在 search-dta.ts 中更改类型
export class SearchDta {
registreNational: number;
fiscalYear: number;
country: string;
constructor(
registreNational = 0,
fiscalYear = 0,
country = '',
) {
this.registreNational = registreNational;
this.fiscalYear = fiscalYear;
this.country = country
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.