角度数据表,日历可编辑

时间:2017-08-28 20:48:56

标签: angular primeng primeng-datatable

我们要求使用日历作为模板列的可编辑网格,我使用以下代码,但它在运行时返回错误。我认为错误发生在下面突出显示的行。

错误:未捕获(承诺):位置2的意外字面

 <div class="content">
    <div class="form-section">
        <form *ngIf="checklistForm" class="form" [formGroup]="checklistForm" novalidate>
            <p-growl [(value)]="successMessage"></p-growl>
            <div class="alert alert-danger" role="alert" *ngIf="errorMessage">
                <span>{{ errorMessage }}</span>
            </div>
            <userTracking [isChanged]="isChanged">
            </userTracking>
            <p-dataTable [value]="lstchecklistModel" [responsive]="true" rowGroupMode="subheader" groupField="groupdesc" [editable]="true" [style]="{'margin-top':'10px'}">
                <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['groupdesc']}}</ng-template>
                <p-column field="labelName" header="Checklist" [style]="{'overflow':'visible', 'width':'300px'}"></p-column>
                <p-column field="required" header="Required?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}">
                    <ng-template let-col let-row="rowData" let-i="rowIndex" pTemplate="editor">
                        <p-dropdown [(ngModel)]="row[col.field]" (onChange)="OnRequiredChange(row);" [ngModelOptions]="{standalone: true}" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                    </ng-template>
                </p-column>
                <p-column field="received" header="Recived?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}">
                    <ng-template let-col let-row="rowData" pTemplate="editor">
                        <p-dropdown [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" (onChange)="OnRecievedChange(row);" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                    </ng-template>
                </p-column>
                <p-column field="receivedDate" header="Received Date">     
                    <ng-template let-col let-row="rowData" pTemplate="body">
                        {{row[col.field] }}
                    </ng-template>              
                </p-column>
                **<p-column field="mailReceivedDate" header="Mail Received Date" [editable]="true" [style]="{'overflow':'visible'}">
                    <ng-template let-col let-row="rowData" pTemplate="body">
                        {{row[col.field] }}
                    </ng-template>
                    <ng-template let-col let-row="rowData" pTemplate="editor">
                        <p-calendar [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" [locale]="en" ></p-calendar>
                    </ng-template>
                </p-column>**
                <p-column field="updatedBy" header="Updated By"></p-column>
            </p-dataTable>
            <footer class="pager">
                <div class="button-group">
                    <button class="btn btn-primary btn-sm" (click)="saveChecklist();" [disabled]="!checklistForm.valid">Save</button>
                    <button class="btn btn-primary btn-sm" (click)="SaveandContinue();" [disabled]="!checklistForm.valid">Save & Continue</button>
                    <button class="btn btn-secondary btn-sm" type="reset" (click)="loadData();" formnovalidate>Cancel</button>
                </div>
            </footer>
        </form>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

当我尝试在p表中使用p日历时,我的项目中出现了完全相同的错误。我的问题是日历绑定到的ngModel对象来自http请求,因此[(ngModel)] =“ myDate”的运行时类型是字符串。

我如何解决此问题:

this.myObject = get(); if (myObject.myDate) { myObject.myDate = new Date(myObject.myDate); }

之所以使用if语句,是因为new Date(null)返回1969年的某个日期(特别是Date.getTime为0的日期),而不是null。

相关问题