Question

我有一个angular 8应用程序和一个带有两个值的下拉列表：

在后端，两个值的名称是：“邀请”和“已注册”。

但是在前端它们被称为：Open a fgerond：

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>

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

1 个答案: