Angular - ng prime datatable - 如何在对话框中添加数据

这个代码文件我收到错误 . 我收到了错误

ERROR TypeError: Cannot read property 'slice' of undefined
    at MfpsDatatableComponent.save (mfps-datatable.component.ts:22)
    at Object.eval [as handleEvent] (MfpsDatatableComponent.ngfactory.js:256)
    at Object.handleEvent (core.js:13532)
    at Object.handleEvent (core.js:14264)
    at dispatchEvent (core.js:9944)
    at eval (core.js:10569)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)

datatable.component.html

<p-dataTable scrollable="true" [value]="listAccount" [(selection)]="selectedAccount"  scrollHeight="500px"    [rows]="10" [paginator]="true" [pageLinks]="3"
        [rowsPerPageOptions]="[5,10,20]">
            <p-column [style]="{'width':'150px','white-space': 'normal'}" field="account" header="account number"
            ></p-column>
            <p-column [style]="{'width':'150px','white-space': 'normal'}" field="creationDate" header="creation date"
            ></p-column>
            <p-column [style]="{'width':'150px','white-space': 'normal'}" field="" header="Action" >
                <ng-template let-col let-row="rowData " pTemplate type="body ">
                                <div>
                                    <button class="btn btn-success" 
                                        (click)="download(row)">Edit</button>   | 
                                        <button class="btn btn-error" 
                                        (click)="download(row)">Delete</button>                                                  
                                </div>
                 </ng-template>
            </p-column>



</p-dataTable>

  <div class="ui-helper-clearfix" style="width:100%;float: left;"><button type="button" pButton icon="fa-plus"
                 style="float:left" (click)="showDialogToAdd()" label="Add"></button></div>

<p-dialog header="Account Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
    <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="account">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="vin">Account</label></div>
            <div class="ui-grid-col-8"><input pInputText id="account" [(ngModel)]="account.account" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="year">Creation Date</label></div>
            <div class="ui-grid-col-8"><input pInputText id="creationDate" [(ngModel)]="account.creationDate" /></div>
        </div>
    </div>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
            <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
            <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
        </div>
    </p-footer>
</p-dialog>

datatable.component.ts

从@ @ angular / core导入{Component,OnInit};从“app / -datatable / model / AccountDetails”导入;

@Component({selector:'app-datatable',templateUrl:' . / - data.component.html'

})

export class DatatableComponent  implements OnInit{

    newAccount :boolean;
    account: AccountDetailsImpl = new AccountDetailsImpl();
    displayDialog: boolean;
    listAccount: AccountDetails[];
    selectedAccount: AccountDetails;

    ngOnInit(): void {
this.listAccount=[{account:'',creationDate:''}]
    }
save() {
        let cars = [...this.listAccount];
        if(this.newAccount)
            cars.push(this.account);
        else
            cars[this.findSelectedCarIndex()] = this.account;

        this.listAccount = cars;
        this.account = null;
        this.displayDialog = false;
    }
 showDialogToAdd() {
        this.newAccount = true;
        this.account = new AccountDetailsImpl();
        this.displayDialog = true;
    }
    findSelectedCarIndex(): number {
        return this.listAccount.indexOf(this.selectedAccount);
    }
}

class AccountDetailsImpl implements AccountDetails {
    account: string;
    creationDate: string;
}

回答(0)