Как получить значение из выпадающего списка из бэкэнда в шаблоне Angular - PullRequest
Новая
       6

Как получить значение из выпадающего списка из бэкэнда в шаблоне Angular

0 голосов
/ 08 октября 2019

У меня есть приложение 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>

Итак, мой вопрос, как вернуть выбранное значение из списка dropdoown в вызове API?

Итак, эта строка: 

  .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>

1 Ответ

1 голос
/ 08 октября 2019

В вашем компоненте вы можете объявить: 

  selectedValue: string;

и в вашем шаблоне: 

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

для более подробной информации: https://stackoverflow.com/a/48705695/7604006

и опроблема с переведенным значением, вам нужно сопоставить его, например: * 10101 

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>
...