[英]p-autoComplete Pre-select a default value
I am using p-autoComplete in a table, once a row is selected my auto complete should preselect the current value..I tried using [(ngModel)]="row.bsaName" but it is not working. 我在表中使用p-autoComplete,一旦选择了行,我的自动完成功能应该预先选择当前值。我尝试使用[(ngModel)] =“ row.bsaName”,但无法正常工作。 (Once I click on my dropwdown I see all the values, I confirmed the values do exist on my p-autoComplete dropdown)
(一旦单击下拉列表,我将看到所有值,并确认这些值确实存在于我的p-autoComplete下拉列表中)
also Note I used p-calendar which I was able to pre-select the current date once click on edit and not sure why auto complete is different 还请注意,我使用了p-calendar,一旦点击“ edit”,我就能够预先选择当前日期,并且不确定为什么自动完成功能会有所不同
hTML 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>
component 零件
bsaListVal: IBsaList;
iBsaList: IBsaList[];
originalBsaList: IBsaList[];
searchBsaList(event) {
this.iBsaList = this.originalBsaList;
this.iBsaList = this.iBsaList
.filter(data => data.name.toString()
.toLowerCase()
.indexOf(event.query.toString().toLowerCase()) !== -1);
}
GetBsaList() {
this._dashboardService.getBSAList()
.subscribe(
data => {
this.iBsaList = data.result;
this.originalBsaList = data.result;
},
error => console.log('xx Method: ' + 'alert alert-danger'));
}
interface 接口
export interface IBsaList {
id: string,
name: string
}
********************************************UPDATE********************************************** HTML ************************************************更新***** ********************************************* HTML
<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>
Component 零件
bsaListVal: IBsaList;
iBsaList: IBsaList[];
originalBsaList: string[];
bsaNameArr: string[];
searchBsaList(event) {
this.bsaNameArr = this.originalBsaList;
this.bsaNameArr = this.bsaNameArr
.filter(data => data
.toLowerCase()
.indexOf(event.query.toString().toLowerCase()) !== -1);
}
GetBsaList() {
this._dashboardService.getBSAList()
.subscribe(
data => {
this.bsaNameArr = data.result.map(e => e.name);// data.result;
this.originalBsaList = data.result.map(e => e.name);
},
error => console.log('GetAllAccessFor Method: ' + 'alert alert-danger'));
}
Just to reconcile everything happened in the comments. 只是为了调和评论中发生的一切。
The reason why the autocomplete
does not work as expected is because you're binding [(ngModel)]
to a string row.bsaName
while your [suggestions]
is an Array of Object . autocomplete
功能无法按预期运行的原因是,当[suggestions]
是Object数组时,您将[(ngModel)]
绑定到字符串 row.bsaName
。 Hence, binding does not work here. 因此,绑定在这里不起作用。 There are couple of ways to fix the issue:
有两种方法可以解决此问题:
row.bsaName
or bsaName
property on your data to an Object with {id, name}
to match the data model of your [suggestions]
row.bsaName
或bsaName
属性更改为具有{id, name}
的对象,以匹配您[suggestions]
的数据模型 bsaNamesArr: string[]
and on your data fetching, map
over your data.result
to get the name array
and assign that to bsaNamesArr
this.bsaNamesArr = data.result.map(element => element.name)
. bsaNamesArr: string[]
并在获取数据时,在data.result
上map
以获取name array
并将其分配给bsaNamesArr
this.bsaNamesArr = data.result.map(element => element.name)
。 Now, use bsaNamesArr
as the [suggestions]
and also use bsaNamesArr
in your (completeMethod)
as well. bsaNamesArr
用作[suggestions]
并在您的(completeMethod)
也使用bsaNamesArr
。 Make sure to remove the field
property on your p-autocomplete
if you use the 2nd approach. 如果使用第二种方法,请确保删除
p-autocomplete
上的field
属性。
Good luck! 祝好运!
You can use, 您可以使用,
<ng-template></ng-template>
inside the 在 - 的里面
<p-autoComplete></p-autoComplete>
tag as I have done in my project. 标记我在项目中所做的。 Syntax below:
语法如下:
<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>
So that if you want to select 2 values from selected suggestions we can do using this. 因此,如果您想从所选建议中选择2个值,我们可以使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.