"从下拉列表中选择的值"不会选择该值

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);
});
}

然后我得到正确的数据。

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

好吧，如果我这样做：

<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);

它也是空的，我的意思是空白

Answer 1

你的绑定语法好像是错误的，像这样用——

[value]="option?.value"

或

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

始终建议使用绑定的第一种模式，同时使用 angular 以获得更清晰的代码样式。

此外，最好在处理异步调用(数据(时使用?elevis 运算符，它将避免由 falsy 值产生的警告/错误。

Answer 2

简单的插值错误。使用{{option.value}}而不是option.value

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

Answer 3

我不明白解决方案。但它有效。我做了这样的更改：

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>

这似乎有效。但我不明白这个解决方案。因为我有一个另一个下拉列表，其中还填充了来自后端的数据，我可以使用异步。但是好吧。