0

我刚开始使用 PrimeNG，在使用 inputtext 时遇到了一些问题。

I have a datatable with single selection and when a row is selected, a dialog is opened. 我试图在对话框中将选定对象的属性显示为 inputtext 值（我打算稍后实现编辑该对象，这就是我在 inputtext 中显示它的原因）。

我收到以下错误：

VM93567:77 类型错误：无法在 DebugAppView.AppView.detectChanges 处读取 DebugAppView._View_PetsComponent0.detectChangesInternal (PetsComponent.template.js:383:44) 处未定义的属性 'id'（在 ( http://localhost:8080/vendor. js:729:2 ), :234:14) 在 DebugAppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :339:44) 在 DebugAppView.AppView.detectViewChildrenChanges (eval在 ( http://localhost:8080/vendor.js:729:2 ), :260:19) 在 DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:96:8) 在 DebugAppView.AppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :234:14) 在 DebugAppView.detectChanges (eval at (http://localhost:8080/vendor.js:729:2 ), :339:44) 在 DebugAppView.AppView.detectViewChildrenChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), : 260:19) 在 DebugAppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.template.js:36:8) 在 DebugAppView.AppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :234 :14) 在 DebugAppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :339:44) at ViewRef_.detectChanges (eval at ( http://localhost:8080/vendor .js:615:2 ), :124:65) 在 eval (eval at ( http://localhost:8080/vendor.js:291:2), :415:84) 在 Array.forEach (native) 在 ApplicationRef_.tick (eval at ( http://localhost:8080/vendor.js:291:2 ), :415:38) 在 ApplicationRef_。loadComponent (eval at ( http://localhost:8080/vendor.js:291:2 ), :386:14) at eval (eval at ( http://localhost:8080/vendor.js:291:2 ), :373:19) 在 eval (eval at ( http://localhost:8080/vendor.js:291:2 ), :344:26) 在 ZoneDelegate.invoke (eval at ( http://localhost:8080/polyfills .js:2780:2 ), :323:29) 在 Object.onInvoke (eval at ( http://localhost:8080/vendor.js:567:2 ), :46:41) 在 ZoneDelegate.invoke (eval at ( http://localhost:8080/polyfills.js:2780:2), :322:35) 在 Zone.run (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :216:44) 在 NgZoneImpl.runInner (eval at ( http://localhost :8080/vendor.js:567:2 ), :77:71) 在 NgZone.run (eval at ( http://localhost:8080/vendor.js:561:2 ), :228:66) 在 ApplicationRef。在 ApplicationRef_.bootstrap运行 (eval at ( http://localhost:8080/vendor.js:291:2 ), :342:14) (eval at ( http://localhost:8080/vendor.js:291:2 ), :364:21) 在 ZoneDelegate.invoke 的 eval (eval at ( http://localhost:8080/vendor.js:291:2 ), :148:50) (eval at ( http://localhost:8080 /polyfills.js:2780:2 ), :323:29) 在 Object.onInvoke (eval at (http://localhost:8080/vendor.js:567:2 ), :46:41) 在 ZoneDelegate.invoke (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :322: 35) 在 Zone.run (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :216:44) at eval (eval at ( http://localhost:8080/polyfills.js: 2780:2 ), :571:58) 在 ZoneDelegate.invokeTask (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :356:38) 在 Object.onInvokeTask (eval at ( http: //localhost:8080/vendor.js:567:2 ), :37:41) 在 ZoneDelegate.invokeTask (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :355:43)在 Zone.runTask (eval at ( http://localhost:8080/polyfills.js:2780:2), :256:48) 在 drainMicroTaskQueue (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :474:36)

这是我的代码：

宠物类

export class Pet {
id: number;
type: string;
price: number;

}

零件

import {Component, OnInit} from '@angular/core';
import {TestService} from './test.service'
import {Pet} from './pet'
import {DataTable, Column, Dialog, Button, InputText} from 'primeng/primeng';

@Component({
    selector: 'pets',
    template: require('./pets.component.html'),
    styles: [require('./pets.component.css')],
    providers: [TestService],
    directives: [DataTable, Column, Dialog, Button, InputText]
})
export class PetsComponent implements OnInit {
    pets: Pet[];
    selectedPet: Pet;
    displayPetDlg: boolean = false;
    cols: any[];
    error: any;

    constructor(private testService: TestService) {
    }

    ngOnInit() {
        this.getPetList();
        this.initCols();
    }

    getPetList() {
        this.testService
            .getPetList()
            .then(pets => this.pets = pets)
            .catch(error => this.error = error);
    }

    initCols() {
        this.cols = [
            { field: 'id', headerName: 'Id'},
            { field: 'type', headerName: 'Type'},
            { field: 'price', headerName: 'Price'}
        ];
    }

    onRowSelect(event: Event) {
        this.displayPetDlg = true;
    }

}

HTML 模板

<p-dataTable [value]="pets" selectionMode="single" [(selection)]="selectedPet" (onRowSelect)="onRowSelect($event)"> 
   <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header">
   </p-column> 
</p-dataTable>

<p-dialog header="Selected pet" [(visible)]="displayPetDlg" [modal]="true" [draggable]="false" [resizable]="false"> 
   <input type="text" pInputText [(ngModel)]="selectedPet.id" />
   <footer>
      <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
         <button type="button" pButton icon="fa-close" (click)="displayPetDlg=false" label="No"></button>
         <button type="button" pButton icon="fa-check" (click)="displayPetDlg=false" label="Yes"></button>
      </div>
   </footer> 
</p-dialog>

如果我只是将一个对象绑定到一个输入文本，则没有错误，并且输入文本中有一个[Object object]值。所以我假设 Pet 对象的 'id' 字段没有被正确引用（selectedPet.id）。

那么，在对话框中获取所选行（显示对象的字段）的正确方法是什么？

4

1 回答 1

0

如果您设置selectedPet异步，例如

[ngModel]="selectedPet?.id" (ngModelChange)="selectedPet ? selectedPet.id = $event : null"

可能对你有用。

于 2016-07-04T10:19:15.030 回答