我正在使用 primeNG p-Calendar Control 和 AutoComplete。这是我的代码(笨拙)(单击编辑然后保存“)我有两个问题:
- 无论出于何种原因,我都无法获得新选择的日期。无论我做什么,我总是会得到旧日期。
- 我需要能够检查自动完成或日历是否为空。如果有人为空,则应禁用“保存”按钮,并且跨度(必需)应出现在空白字段旁边
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>
<span style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<div>{{row.comment}}</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 style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<button (click)="onSelectedFollowupdRow(row)">Edit</button>
<button (click)="editRow(row)" >Save</button>
</tr>
</ng-template>
</p-table>
零件
bsaListVal: IBsaList;
iBsaList: IBsaList[];
originalBsaList: IBsaList[];
iBsaFollowup: any[];
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() {
var data = {"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"}]};
this.iBsaList = data.result;
this.originalBsaList = data.result;
}
getBSAFollowup() {
var data = { "result":[{"id":"x","ersaID":"XXX","bsaID":"5","followupDate":"10/20/2017","active":true,"comment":"test this 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"}]};
this.iBsaFollowup = data.result;
this.iBsaFollowup.map(row => {
row.isBSAEditable = false;
});
}
onSelectedFollowupdRow(row) {
// console.log('one row select ');
this.iBsaFollowup.filter(row => row.isBSAEditable).map(r => { r.isBSAEditable = false; return r })
row.isBSAEditable = true;
this.bsaListVal = {
id: row.id,
name: row.bsaName
};
}
editRow(row) {
console.log(' BSAid:' + this.bsaListVal.id);
console.log('BSA name:' + this.bsaListVal.name);
console.log('date :' + row.followupDate);
// with this you set all the rows as no editable, so you can change from row to row with the edit button
//print selected bsa ID (auto complete ID)
}
}
export interface IBsaList {
id: string,
name: string
}
****************************************************** ******更新******************************************* ********现在我得到了新的日期(但我需要格式化//mm/dd/yyy)这里也是更新的代码(blunker) 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)]="newfollowupDate" [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
<span style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<div>{{row.comment}}</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 style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<button (click)="onSelectedFollowupdRow(row)" >Edit</button>
<button (click)="editRow(row)" [disabled]="isValid(row)">Save</button>
</tr>
</ng-template>
</p-table>
零件
bsaListVal: IBsaList;
iBsaList: IBsaList[];
originalBsaList: IBsaList[];
iBsaFollowup: any[];
newfollowupDate:Date;
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() {
var data = {"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"}]};
this.iBsaList = data.result;
this.originalBsaList = data.result;
}
getBSAFollowup() {
var data = { "result":[{"id":"x","ersaID":"XXX","bsaID":"5","followupDate":"10/20/2017","active":true,"comment":"test this 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"}]};
this.iBsaFollowup = data.result;
this.iBsaFollowup.map(row => {
row.isBSAEditable = false;
});
}
isValid(row) {
if (this.newfollowupDate && this.bsaListVal) {
return false;
}
return true;
}
onSelectedFollowupdRow(row) {
// console.log('one row select ');
this.iBsaFollowup.filter(row => row.isBSAEditable).map(r => { r.isBSAEditable = false; return r })
row.isBSAEditable = true;
this.newfollowupDate=row.followupDate;
this.bsaListVal = {
id: row.id,
name: row.bsaName
};
}
editRow(row) {
console.log(' BSAid:' + this.bsaListVal.id);
console.log('BSA name:' + this.bsaListVal.name);
console.log('date :' + this.newfollowupDate);
// with this you set all the rows as no editable, so you can change from row to row with the edit button
//print selected bsa ID (auto complete ID)
}
}
export interface IBsaList {
id: string,
name: string
}