我对 Angular 还是有点陌生，我正在尝试在表中使用 p-autoComplete，一旦选择了一行，我的自动完成应该预先选择当前值..我尝试使用 [(ngModel)]="row.bsaName"但它不工作。由于 [suggestion] 是一个对象数组，因此它不具有约束力。我需要将我的数据上的 row.bsaName 或 bsaName 属性更改为具有 {id, name} 的对象以匹配 [suggestions] 的数据模型，我该怎么做？
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>
自动完成下拉列表的结果
全部{"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":"史蒂夫 C"}]}
iBsaFollowUp JSON
全部{"result":[{"id":x,"ersaID":XXX,"bsaID":"5","followupDate":"10/27/2017","active":true,"comment": "测试这个 rsss 2","accessFor":"XXXX","bsaName":"Carolyn G"},{"id":X,"ersaID":XXXX,"bsaID":"1","followupDate": "10/27/2017","active":true,"comment":"test this rsss 4","accessFor":"XXXXX","bsaName":"Mike S"}}}