Question

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

我有一个单选的数据表，当选择一行时，会打开一个对话框。我试图在对话框中显示所选对象的属性作为输入文本值（我打算稍后对该对象进行编辑，这就是我在输入文本中显示它的原因）。

我收到以下错误：

VM93567：77 TypeError：无法读取属性＆＃39; id＆＃39;未定义的在DebugAppView._View_PetsComponent0.detectChangesInternal（PetsComponent.template.js：383：44）在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_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）在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） at Array.forEach（native）在ApplicationRef_.tick（eval at（http://localhost:8080/vendor.js:291:2），：415：38） at ApplicationRef _。 loadComponent（eval at（http://localhost:8080/vendor.js:291:2）,: 386：14）在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） at 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） at ApplicationRef .run（eval at（http://localhost:8080/vendor.js:291:2），：342：14）在ApplicationRef_.bootstrap（eval at（http://localhost:8080/vendor.js:291:2），：364：21）在eval（eval at（http://localhost:8080/vendor.js:291:2），：148：50）在ZoneDelegate.invoke（eval at（http://localhost:8080/polyfills.js:2780:2），：323：29） at 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）在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） at 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>

如果我只是将一个对象绑定到一个inputtext，那么就没有错误，并且inputtext中有一个[Object object]值。所以我假设这个＆＃39; id＆＃39; Pet对象的字段未正确引用（selectedPet.id）。

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

Answer 1

如果您设置selectedPet async，例如

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

可能适合你。

将对象属性绑定到inputtext

1 个答案: