выбранное значение из выпадающего списка не выбирает значение - PullRequest
Новая
       88

выбранное значение из выпадающего списка не выбирает значение

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

У меня есть приложение Angular 8, и у меня есть выпадающий список. Содержимое раскрывающегося списка происходит из серверной части.

Но если я выберу значение из раскрывающегося списка, оно останется неопределенным или не будет выбрано.

Но если я задаю жестко закодированное значение, оно работает.

Это выпадающий список: 

 filterByQrCodes() {
    this.participantService
      .filterParticipantsByQRCode(1, this.selectedValue as any, moment(this.startDate).format("YYYY MM D"), this
        .selectedValueOptie as any)
      .subscribe(filterByQrcode => {
        console.log(filterByQrcode);
        console.log("selectedValue", this.selectedValue as any);
        console.log("selectedValueOption", this.selectedValueOptie);
        this.filterParticipantByQrcode.emit(filterByQrcode);
      });

    this.showDropdownChallenge = true;
  }

и это шаблон: 

  <div  class="search-select searchoptions"  *ngIf="showDropdownVcheqCode && selectedSearch"   >
          <mat-select placeholder="Opties" name="option" [(ngModel)]="selectedValueOptie" (change)="getVcheqCodes()">
            <mat-option *ngFor="let option of (returnEcheqCodes$ | async)" value="option.value"> {{ option.title }} </mat-option>
          </mat-select>
        </div>

, но если я выбираю значение, я получаю эту ошибку: 

error:
EcheqFamilyId: ["The value 'option.value' is not valid for EcheqFamilyId."]
__proto__: Object
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for https://dev-engine.mijnhep.nl/api/medical/organisation/1/Participant/filter-by-echeq?Filter=New&Start=2019%2010%203&EcheqFamilyId=option.value: 400 Bad Request"
name: "HttpErrorResponse"
ok: false
status: 400
statusText: "Bad Request"

Но, например, если я сделаю это: 

filterByVchecCode() {
    this.participantService
      .filterParticipantsByEcheq(1, this.selectedValue as any, moment(this.startDate).format("YYYY MM D"),
        "4597544a-f402-4bd0-870e-cc053ddf7cd0")
      .subscribe(filterByEcheqCode => {
        console.log(filterByEcheqCode);
        console.log("SelectedValueOption", this.selectedValueOptie as any);
        this.filterParticipatnByVcheqCode.emit(filterByEcheqCode);
      });
  }

Тогда я верну правильные данные.

Если мне нужно будет добавить дополнительную информацию. Вы можете сказать это

Ок, если я сделаю это: 

      <div  class="search-select searchoptions"  *ngIf="showDropdownVcheqCode && selectedSearch"   >
          <mat-select placeholder="Opties" name="option" [(ngModel)]="selectedValueOptie" (change)="getVcheqCodes()">
            <mat-option *ngFor="let option of (returnEcheqCodes$ | async)" value="{{option.value}}"> {{ option.title | json }} </mat-option>
          </mat-select>
        </div>

Тогда я получу эту ошибку: 

EcheqFamilyId: Array(1)
0: "The EcheqFamilyId field is required."
length: 1
__proto__: Array(0)
__proto__: Object

, если я сделаю это: 

  console.log(this.selectedValueOptie);

также пусто, я имею в виду пустое

Ответы [ 3 ]

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

Простая ошибка интерполяции. Используйте {{option.value}} вместо option.value

<mat-option *ngFor="let option of (returnEcheqCodes$ | async)" value="{{option.value}}"> {{ option.title }} </mat-option>
0 голосов
/ 16 октября 2019

Я не понимаю решение. Но это работает. Я сделал изменение следующим образом: 

 returnEcheqCodes$: EcheqFamilyInfo[];

и в ngOniit: 

this.echeqDefinitionService.listEcheqFamilies().subscribe(result => {
      this.returnEcheqCodes$ = result;

    });

и в шаблоне без асинхронного канала: 

 <div  class="search-select searchoptions"  *ngIf="showDropdownVcheqCode && selectedSearch">
          <mat-select placeholder="Opties" name="option" [(ngModel)]="selectedValueOptie" >
            <mat-option *ngFor="let option of returnEcheqCodes$ " value="{{option.family}}" > {{ option.title}} </mat-option>
          </mat-select>
        </div>

И этопохоже на работу. Но я не понимаю этого решения. Поскольку у меня есть другой выпадающий список с также заполнен данными из бэкэнда, и я могу использовать асинхронный. Но ладно.

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

Ваш синтаксис привязки кажется неправильным, используйте его следующим образом - 

[value]="option?.value"

или 

value="{{option?.value}}"

Первый шаблон для привязки всегда рекомендуется при использовании углового для более чистого стиля кода.

Также было бы лучше использовать оператор ? elevis при работе с асинхронными вызовами (данными), это позволит избежать предупреждений / ошибок, вызванных ложным значением.

...