如何从 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

在您的组件中，您可以声明：&nbsp; selectedValue: string;并在您的模板中：&nbsp;<mat-select [(ngModel)]="selectedValue"...更多详情：https : //stackoverflow.com/a/48705695/7604006关于翻译值的问题，您需要对其进行映射，例如：public statusOptions = {&nbsp; &nbsp; Registratie: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { status: "Open", apiStatus: "Invited" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { status: "Afgerond", apiStatus: "Registerd" }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;],并在模板中使用它：<mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option.apiStatus">&nbsp; &nbsp; &nbsp; &nbsp; {{option.status}}</mat-option>