如何从 Angular 模板的后端下拉列表中获取价值

Question

我有一个 angular 8 应用程序和一个包含两个值的下拉列表：在后端，两个值的名称是：已邀请和已注册。但在前端，它们被称为：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 调用：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>

Answer 1

在您的组件中，您可以声明：

  selectedValue: string;

并在您的模板中：

 <mat-select [(ngModel)]="selectedValue"...

更多详情：https : //stackoverflow.com/a/48705695/7604006

关于翻译值的问题，您需要对其进行映射，例如：

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>