BIG陽
2021-11-12 16:52:12
我有一個 angular 8 應(yīng)用程序和一個包含兩個值的下拉列表:在后端,兩個值的名稱是:已邀請和已注冊。但在前端,它們被稱為:Open en afgerond:public statusOptions = { Registratie: ["Open", "Afgerond"], VCheq: ["Ongeopend", "Open", "Afgerond", "Verlopen"], Doelen: ["Tussentijds doel behaald", "Geen data sinds", "Eind doel behaald"], Qrcode: ["Gescanned", "Niet gescanned"], Inlog: [], Chat: [] };我有一個這樣的 api 調(diào)用:filerByRegistration() { console.log( this.participantService .filterParticipantsByRegistration(1, this.statusOptions['Invited'], moment(this.startDate).format("YYYY MM D")) .subscribe(filterByRegistration => { // this.startDate = filterRegistration.start.value; this.statusOptions[''] = filterByRegistration; console.log(this.otherOptions['Invited'] = filterByRegistration); this.filterparticipantByRegistration.emit(filterByRegistration); console.log(this.startDate.toString()); console.log(filterByRegistration); }) ); }組件的模板如下所示:<div class="filter-plus mat-elevation-z8" [ngClass]="{ expanded: searchExpanded }"> <div class="filter-plus-search-fields"> <div class="search-types"> <mat-radio-group> <mat-radio-button *ngFor="let option of searchOptions" [value]="option" (change)="setSelectedSearchOptions(option.label)" > {{option.label}} </mat-radio-button> </mat-radio-group> </div> <div class="search-selects"> <div class="search-select searchstatus" *ngIf="selectedSearch && hasStatusOptions(selectedSearch)" > <mat-select placeholder="Status" name="option"> <mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option" > {{ option }} </mat-option> </mat-select> </div>
1 回答

慕姐8265434
TA貢獻(xiàn)1813條經(jīng)驗 獲得超2個贊
在您的組件中,您可以聲明:
selectedValue: string;
并在您的模板中:
<mat-select [(ngModel)]="selectedValue"...
更多詳情:https : //stackoverflow.com/a/48705695/7604006
關(guān)于翻譯值的問題,您需要對其進(jìn)行映射,例如:
public statusOptions = {
Registratie: [
{ status: "Open", apiStatus: "Invited" },
{ status: "Afgerond", apiStatus: "Registerd" }
],
并在模板中使用它:
<mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option.apiStatus">
{{option.status}}
</mat-option>
添加回答
舉報
0/150
提交
取消