从下拉列表中选择的值未选择值

Question

我有一个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);
      });
  }

然后我得到正确的数据。

如果我必须提供更多信息。你可以说

Answer 1

您的绑定语法似乎是错误的，像这样使用它-

[value]="option?.value"

或

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

始终建议使用第一模式进行装订，而将角型用于较干净的代码样式。

另外，在处理异步调用（数据）时最好使用? elevis运算符，它将避免由于虚假值而产生的警告/错误。

Answer 2

简单插补错误。使用{{option.value}}代替option.value

<mat-option *ngFor="let option of (returnEcheqCodes$ | async)" value="{{option.value}}"> {{ option.title }} </mat-option>