表格内的PrimeNG自动填充

Question

我对Angular有点陌生，我试图在表内使用p-autoComplete，一旦选择了一行，我的自动完成功能应该预先选择当前值。.我尝试使用[[ngModel）] =“ row .bsaName”，但无法正常工作。由于[suggestion]是一个对象数组，因此没有绑定。 我需要将数据上的row.bsaName或bsaName属性更改为具有{id，name}的对象，以匹配[建议]的数据模型，我该怎么做？

HTML

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

                    <ng-template pTemplate="header">
                        <tr>
                            <th width="5%">eRSA ID</th>
                            <th width="15%">Access For</th>
                            <th width="17%">Followup DT</th>
                            <th width="33%">Comment</th>
                            <th width="20%">BSA Name</th>
                            <th width="10%">Action</th>

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


                            <td>
                                <div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
                                <div *ngIf="row.isBSAEditable">
                                    <!--<textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5"></textarea>-->
                                    <p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                                    <!--<span *ngIf="isEmpty(row.followupDate)" style="color:crimson; font-size:8pt">Required</span>-->
                                </div>
                            </td>
                            <td>
                                <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
                                <div *ngIf="row.isBSAEditable">
                                    <textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5" ></textarea>
                                    <!--<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)]="bsaListVal" [suggestions]="iBsaList"  (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id"[dropdown]="true"></p-autoComplete>
                                    <span *ngIf="isEmpty(row.bsaName)" style="color:crimson; font-size:8pt">Required</span>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <modal [row]="row" [disableEditSaveButton]='isEmpty(row.comment)' (deleteRow)="onDeleteFollowup(row)" [showModal]="!row.isBSAEditable" (selectedRow)="onSelectedFollowupdRow(row)" (cancelEdit)="onCancelFollowupEdit(row)" (save)="onFollowupSave(row)"></modal>
                                </div>
                                <!--<button (click)="editRow(row)">Edit</button>-->
                            </td>

                        </tr>
                    </ng-template>

                </p-table>

组件

     bsaListVal: IBsaList;
        iBsaList: IBsaList[];
        originalBsaList: IBsaList[];

 ngOnInit(): void {


       this.getBSAFollowup();
            this.GetBsaList();



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

        }
         getBSAFollowup() {
        this._dashboardService.getBSAFollowup()
            .subscribe(
            data => {
                this.iBsaFollowup = data.result;
                this.iBsaFollowup.map(row => {
                    row.isBSAEditable = false;
                }); 
            },
            error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
    }

界面

export interface IBsaList {

    id: string,
    name: string
}

数据结果

All{"result":[{"id":"1","name":"Mike S"},{"id":"2","name":"John B"},{"id":"3","name":"Adam P"},{"id":"4","name":"Sam J"},{"id":"5","name":"Carolyn G"},{"id":"6","name":"Steve C"}]}

*************************************************** **********更新******************************************* ***** 为简单起见，我删除了（* ngIf =“ row.isBSAEditable”），使其可以自动编辑。还取出了模态并添加了“编辑”按钮

HTML

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

    <ng-template pTemplate="header">
        <tr>
            <th width="5%">eRSA ID</th>
            <th width="15%">Access For</th>
            <th width="17%">Followup DT</th>
            <th width="33%">Comment</th>
            <th width="20%">BSA Name</th>
<th width="10%">Action</th>         

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


            <td>

                <div>
                    <p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date" [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                </div>
            </td>
            <td>
                <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>

            </td>


            <td>

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


            </td>
            <td>
        <button (click)="editRow(row)">Edit</button>


        </tr>
    </ng-template>

</p-table>

自动完成下拉菜单的结果

  

全部{“结果”：[{“ id”：“ 1”，“名称”：“ Mike S”}，{“ id”：“ 2”，“名称”：“约翰   B“}，{” id“：” 3“，” name“：” Adam P“}，{” id“：” 4“，” name“：” Sam   J“}，{” id“：” 5“，” name“：” Carolyn G“}，{” id“：” 6“，” name“：” Steve C“}]}}

iBsaFollowUp JSON

全部{“结果”：[{“ id”：x，“ ersaID”：XXX，“ bsaID”：“ 5”，“ followupDate”：“ 10/27/2017”，“活动”：true，“ comment“：”测试此rsss 2“，” accessFor“：” XXXX“，” bsaName“：” Carolyn G“}，{” id“：X，” ersaID“：XXXX，” bsaID“：” 1“，” followupDate“：” 10/27/2017“，” active“：true，” comment“：”测试此rsss 4“，” accessFor“：” XXXXX“，” bsaName“：” Mike S“}}}

Answer 1

知道了，最大的问题是映射[（ngModel）] = row.bsaName，因为p-autoComplet绑定到对象，这将永远无法工作。

我必须执行以下操作

HTML

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

                <ng-template pTemplate="header">
                    <tr>
                        <th width="5%">eRSA ID</th>
                        <th width="15%">Access For</th>
                        <th width="17%">Followup DT</th>
                        <th width="33%">Comment</th>
                        <th width="20%">BSA Name</th>
                        <th width="10%">Action</th>

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


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
                            <div *ngIf="row.isBSAEditable">
                                <!--<textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5"></textarea>-->
                                <p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                                <!--<span *ngIf="isEmpty(row.followupDate)" style="color:crimson; font-size:8pt">Required</span>-->
                            </div>
                        </td>
                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
                            <div *ngIf="row.isBSAEditable">
                                <textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5" ></textarea>
                                <!--<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)]="bsaListVal" [suggestions]="iBsaList"  (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="id" dataKey="name" [dropdown]="true"></p-autoComplete>
                                                       </div>
                        </td>
                        <td>
                            <div>
                                <modal [row]="row" [disableEditSaveButton]='isEmpty(row.comment)' (deleteRow)="onDeleteFollowup(row)" [showModal]="!row.isBSAEditable" (selectedRow)="onSelectedFollowupdRow(row)" (cancelEdit)="onCancelFollowupEdit(row)" (save)="onFollowupSave(row)"></modal>
                            </div>

                        </td>

                    </tr>
                </ng-template>

            </p-table>

组件

bsaListVal: IBsaList;
    iBsaList: IBsaList[];
    onSelectedFollowupdRow(row) {

        this.originalFollowupCommentt = row.comment;
        this.iBsaFollowup.filter(row => row.isBSAEditable).map(r => { r.isBSAEditable = false; return r })
        row.isBSAEditable = true;
        this.bsaListVal = {
            id: row.id,
            name: row.name
        };

    }
 onFollowupSave(row) {

         console.log('id:' + this.bsaListVal.id);
         console.log('name:' + this.bsaListVal.name);
}