p-autoComplete Pre-select一个默认值

Question

我在 table 中使用 p-autoComplete，一旦一行被 selected 我的自动完成应该在 select 当前值之前..我尝试使用 [(ngModel )]="row.bsaName" 但它不起作用。（单击我的下拉列表后，我看到了所有值，我确认这些值确实存在于我的 p-autoComplete 下拉列表中）

另请注意，我使用了 p-calendar，一旦点击编辑，我就可以预 select 当前日期，但不确定为什么自动完成不同

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>

分量

    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'));

    }

界面

export interface IBsaList {

    id: string,
    name: string
}

************************************************更新************************************************* 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>

组件

        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'));

    }

Answer 1

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

autocomplete 无法按预期工作的原因是因为您将 [(ngModel)] 绑定到 string row.bsaName 而您[suggestions] 是一个 对象数组 。因此，绑定在这里不起作用。有几种方法可以解决此问题：

将数据的 row.bsaName 或 bsaName 属性更改为具有 {id, name} 的对象，以匹配 [suggestions][=46= 的数据模型]
制作一个 字符串数组 例如：bsaNamesArr: string[] 并且在你的数据获取中，map 在你的 data.result 上得到 name array 并将其分配给 bsaNamesArr this.bsaNamesArr = data.result.map(element => element.name)。现在，使用 bsaNamesArr 作为 [suggestions] 并在 (completeMethod) 中也使用 bsaNamesArr。

如果您使用第二种方法，请务必删除 p-autocomplete 上的 field 属性。

祝你好运！

Answer 2

你可以使用，

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

因此，如果您想从 selected 建议中 select 2 个值，我们可以使用它来完成。

p-autoComplete Pre-select一个默认值

p-autoComplete Pre-select a default value

typescript

primeng

angular

primeng-datatable

primeng-dropdowns