Angular p-自动完成预选默认值_Angular_Typescript_Primeng_Primeng Datatable_Primeng Dropdowns

Angular p-自动完成预选默认值

angular typescript

Angular p-自动完成预选默认值,angular,typescript,primeng,primeng-datatable,primeng-dropdowns,Angular,Typescript,Primeng,Primeng Datatable,Primeng Dropdowns,我在表格中使用p-autoComplete，一旦选择了一行，我的自动完成应该预先选择当前值..我尝试使用[（ngModel）]=“row.bsaName”，但它不起作用。（当我点击我的下拉菜单时，我看到了所有的值，我确认这些值确实存在于我的p-autoComplete下拉菜单中）另外请注意，我使用了p-calendar，我可以在单击“编辑”时预先选择当前日期，但不确定为什么“自动完成”会有所不同 hTML <p-table #dt [value]="iBsaFollow

我在表格中使用p-autoComplete，一旦选择了一行，我的自动完成应该预先选择当前值..我尝试使用[（ngModel）]=“row.bsaName”，但它不起作用。（当我点击我的下拉菜单时，我看到了所有的值，我确认这些值确实存在于我的p-autoComplete下拉菜单中）

另外请注意，我使用了p-calendar，我可以在单击“编辑”时预先选择当前日期，但不确定为什么“自动完成”会有所不同

hTML

        <p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                     [rows]="10">

                <ng-template pTemplate="header">
                    <tr>
                        <th>ID</th>
                        <th>Followup DT</th>
                        <th>Comment</th>
                        <th>BSA Name</th>
                        <th>Action</th>

                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-row>
                    <tr>
                        <td>{{row.ID}}</td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-calendar name="followupDate" [(ngModel)]="row.followupDate"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
                            <div *ngIf="row.isBSAEditable">
                                                                       <input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200">
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                <modal [row]="row" [disableEditSaveButton]='isEmpty(row.comment)' (deleteRow)="onDeleteToDoList(row)" [showModal]="!row.isBSAEditable" (selectedRow)="onSelectedFollowupdRow(row)" (cancelEdit)="onCancelEdit(row)" (save)="onSave(row)"></modal>
                            </div>
                            <!--<button (click)="editRow(row)">Edit</button>-->
                        </td>

                    </tr>
                </ng-template>

            </p-table>

           <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="bsaNameArr"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

接口

export interface IBsaList {

    id: string,
    name: string
}

********************************************更新********************************************** HTML

        <p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                     [rows]="10">

                <ng-template pTemplate="header">
                    <tr>
                        <th>ID</th>
                        <th>Followup DT</th>
                        <th>Comment</th>
                        <th>BSA Name</th>
                        <th>Action</th>

                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-row>
                    <tr>
                        <td>{{row.ID}}</td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-calendar name="followupDate" [(ngModel)]="row.followupDate"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
                            <div *ngIf="row.isBSAEditable">
                                                                       <input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200">
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                <modal [row]="row" [disableEditSaveButton]='isEmpty(row.comment)' (deleteRow)="onDeleteToDoList(row)" [showModal]="!row.isBSAEditable" (selectedRow)="onSelectedFollowupdRow(row)" (cancelEdit)="onCancelEdit(row)" (save)="onSave(row)"></modal>
                            </div>
                            <!--<button (click)="editRow(row)">Edit</button>-->
                        </td>

                    </tr>
                </ng-template>

            </p-table>

           <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="bsaNameArr"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

只是为了调和评论中发生的一切

自动完成

无法按预期工作的原因是，您正在将

[（ngModel）]

绑定到一个字符串

行.bsaName

，而

[建议]

是一个对象数组。因此，绑定在这里不起作用。有两种方法可以解决此问题：

将数据上的

row.bsaName

或

bsaName

属性更改为具有

{id，name}

的对象，以匹配

[建议]

制作一个字符串数组，例如：

bsaNamesArr:string[]

，在数据获取时，

map

覆盖

数据。result

获取

名称数组

，并将其分配给

bsaNamesArr

this.bsaNamesArr=data.result.map（element=>element.name）。现在，使用

bsaNamesArr

作为

[建议]

并在

（completeMethod）

中使用

bsaNamesArr

如果使用第二种方法，请确保删除

p-autocomplete

上的

字段

属性

祝你好运

您可以使用

 <ng-template></ng-template>

内部

 <p-autoComplete></p-autoComplete>

标记，就像我在项目中所做的那样。语法如下：

<p-autoComplete
     pTooltip="'tooltip'"
     [(ngModel)]="student"
     #student_id="ngModel"
     name="student_id"
     [suggestions]="studentsList"
     (completeMethod)="filterStudentsList($event)"
     field="name"
     [size]="30"
     placeholder="Enter Student name"
     [minLength]="1"
     required
     (onSelect)="onSelect($event)">
  <ng-template let-student pTemplate="item">
    {{ student.name }}
  </ng-template>
  <ng-template let-student pTemplate="selectedItem">
    {{ student.id }} {{ student.student_name }}
  </ng-template>


{{student.name}
{{student.id}{{student.student_name}

因此，如果您想从所选建议中选择2个值，我们可以使用它。

问题是

行。bsaName

可能是

字符串，而自动完成
填充了对象数组
，并且您指示字段为名称
。由于此原因，绑定无法工作。更新了我上面的代码..它是一个字符串数组…那么我如何实现这一点呢？您可以将IBsaList
映射到string[]
。类似于：this.bsaNameArr=this.iBsaList.map（bsa=>bsa.name）
然后使用bsaNameArr
作为[建议]
自动完成测试将不起作用..更新了我上面的代码数据返回什么？结果
返回？最后一个问题…我如何从自动完成下拉列表中获取所选id而不是名称。我确实有一个函数可以对所选的行进行编辑，该函数正在工作，但是如何在followUpSave（行）{console.log（“BSA UID”+this.bsaNameArr[row]）；}上获取所选id而不是名称frm auto complete如果您想显示名称并在选中的位置获取id，我建议您使用第一种方法同时访问id和名称。但是，您可以使用Array.find（）方法从selectedName获取id。为了简单起见，我需要使用选项1，因为我有更多基于选择的逻辑。如果使用选项1，我将如何绑定？请原谅我的无知：）@rgoal-在映射到简单的字符串数组之前，您始终可以过滤数组array.filter（a=>a.prop1==“condition1”）.map（element=>element.prop1）