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

Question

我有一个 Angular 8 应用程序和一个包含两个值的下拉列表:

在后端，两个值的名称是:Invited 和 Registerd。

但在前端它们被称为: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>
      <div
        class="search-select searchoptions"
        *ngIf="selectedSearch && hasOtherOptions(selectedSearch)"
      >
        <mat-select placeholder="Opties" name="option">
          <mat-option
            *ngFor="let option of getOtherOptions(selectedSearch)"
            [value]="option"
          >
            {{ option }}
          </mat-option>
        </mat-select>
      </div>
    </div>


    <div>
      <mat-form-field  class="search-field-input">
        <input matInput [matDatepicker]="picker1" placeholder="start datum" [(ngModel)]="startDate"  />
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="extended-search-actions">
      <button
      mat-raised-button
      color="warn"
      class="Button"
      (click)="closeSearch()"
      >
      Annuleer
    </button>
    <button mat-raised-button color="secondary" class="Button">
      Clear
    </button>
    <button
      mat-raised-button
      color="accent"
      class="Button"
      (click)="searchFor()"
    >
      Filter
    </button>
    </div>

  </div>
  <button
    mat-raised-button
    class="extended-search-close"
    (click)="closeSearch()"
    *ngIf="searchExpanded"
  >
    <mat-icon>
      clear
    </mat-icon>
  </button>
</div>

所以我的问题是如何从 api 调用中的 dropdoownlist 返回选定的值？

所以这一行:

  .filterParticipantsByRegistration(1, this.statusOptions['Invited'], moment(this.startDate).format("YYYY MM D"))

然后是关于这段代码:

this.statusOptions['Invited']

谢谢

例如，如果我这样做:

  .filterParticipantsByRegistration(1, 'Invited', moment(this.startDate).format("YYYY MM D"))

然后就可以了，但当然这是硬编码的

我现在是这样的:

 Registratie: [ { status: 'Open', apiStatus: 'Invited' },
    { status: 'Afgerond', apiStatus: 'Registerd' }],

filerByRegistration() {
    console.log(
      this.participantService
        .filterParticipantsByRegistration(1, (this.selectedValue as any), moment(this.startDate).format('YYYY MM D'))
        .subscribe(filterByRegistration => {
         console.log('selected values',  this.selectedValue  );        
          this.statusOptions[''] = filterByRegistration;
          this.filterparticipantByRegistration.emit(filterByRegistration);
        })
    );
  }

还有这个:

   <div
        class="search-select searchoptions"
        *ngIf="selectedSearch && hasOtherOptions(selectedSearch)"
      >
        <mat-select placeholder="Opties" name="option"  >
          <mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus"   >
            {{ option.status }}
          </mat-option>
        </mat-select>
      </div>

啊，好吧，我改变了这个:

 <mat-select placeholder="Status" name="option" [(ngModel)] = "selectedValue" >
          <mat-option
            *ngFor="let option of getStatusOptions(selectedSearch)"
            [value]="option.apiStatus"
          >
            {{ option.status }}
          </mat-option>
        </mat-select>

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>