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}}"

在使用尖锐的代码样式时，始终建议使用第一种绑定模式。

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

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>

这似乎可行。但是我不明白这个解决方法。因为我还有另一个下拉列表，所以它也填充了来自后端的数据，因此我可以使用异步。可是

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

3 个答案: