如何在下拉列表中添加選項文本？

Question

我有一個下拉列表，我想在用戶選擇他的國家之前顯示“選擇國家”。

示例 1

我試過這條線：

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

例子2

編輯

我怎樣才能使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);

    }


}

Answer 1

當您引用 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
    }
}