为什么传递给 [(ngModel)] 变量的值不能显示为从 PrimeNG 下拉菜单中选择的值？答案

【问题标题】：Why cant value passed to [(ngModel)] variable appear as a selected value from the PrimeNG drop Down?为什么传递给 [(ngModel)] 变量的值不能显示为从 PrimeNG 下拉菜单中选择的值？
【发布时间】：2022-11-28 12:23:40
【问题描述】：

我将数据从父组件传递到子组件，并且填充了从父组件接收到的数据的普通文本输入，但这不适用于下拉列表。

我将数据传递给变量的代码块输入名称就像我希望的那样工作。

        <span class="p-float-label">
          <input #nameID="ngModel" [(ngModel)]="enteredName" [style]="{'width':'100%'}" [textContent]="name" id="nameID"
            maxlength="256" name="nameID" pInputText required type="text" />
          <label for="nameID">Name</label>
        </span>

但是当我通过“选定的记录器类型" 它不会显示为从下拉列表中选择的选项。

下面是它的代码。

        <span class="p-float-label">
          <p-dropdown [options]="recorderType" name="recorderTypeID" id="recorderTypeID" optionLabel="name"
            [autoDisplayFirst]="false" #recorderTypeID="ngModel" [(ngModel)]="selectedRecoderType"
            [disabled]="(!userCanAdd && !userCanModify)" (onChange)="onChangeRecorderType($event)" [required]=true [style]="{'width': '100%'}" appendTo="body">
          </p-dropdown>
          <label for="recorderTypeID">Recorder Type</label>
        </span>

下面是组件 TS 文件我将变量从“选定的录音机“ 至 ”selectedRecoderType"，但后来我仍然遇到同样的问题。我能知道我做错了什么吗？

P.S 我也更新了下面的截图。

        this.enteredName = "hey";
        this.selectedRecoderType = "Hello";

编辑

this.enteredName = "嘿"; this.selectedRecoderType = "你好";

【问题讨论】：

在模板中你有 selectedRecorderType 但你的 TS 显示 selectedRecorder，不一样。
此外，“Hello”需要存在于选项列表（recorderType）中，p-dropdown 会自动将其显示为选定值。
@Patrick 和我已经进行了更改并编辑了问题，但我仍然无法弄清楚我犯了什么错误。
@Nehal 我已经进行了更改并编辑了问题，但我仍然无法弄清楚我犯了什么错误
您仍然没有解决 recorderType 中的内容，这些内容作为选项传递给 p-dropdown -> <p-dropdown [options]="recorderType" ...

标签： angular primeng

【解决方案1】：

您是否尝试过将 selectedRecoderType 值添加到 recorderType 中？例如：recorderType=[{name:'Hello'}]; selectedRecoderType = {name:'你好'};

【讨论】：