从下拉列表中选择的值没有选择值答案

【问题标题】：selected value from dropdownlist doesnt select the value从下拉列表中选择的值没有选择值
【发布时间】：2019-10-15 10:13:32
【问题描述】：

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

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

【问题讨论】：

尝试将value 替换为[value]。希望在此更改之后它会正常工作。
您能否在stackblitz 中为您当前的场景创建一个示例，因为这将有助于社区更好地理解并以更好的方式解决您的问题。

标签： angular material-design dropdown observer-pattern selectedvalue

【解决方案1】：

你的绑定语法好像错了，这样用-

[value]="option?.value"

或

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

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

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

【讨论】：

什么意思？请交叉检查？
您的 stackblitz 演示未处于工作状态，请检查。
但是我创建了一个新组件。你看到了吗？
我看到了：你好 Angular！开始编辑，看看会发生什么神奇的事情 :)
@mightycodeNewton 我建议你尝试一些改变并检查是否按照我的回答中所说的那样工作。

【解决方案2】：

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

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

【讨论】：

@mightycodeNewton stackblitz 是空的。请提供适当的演示。
@mightycodeNewton 保存文件，然后单击分叉，然后共享编辑器 URL。
@mightycodeNewton 你必须在那里提供你的完整代码。不仅仅是一个示例项目
如果不知道您的属性类型，该代码很难理解。

【解决方案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>

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

【讨论】：