将对象属性绑定到输入文本

Question

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

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

我收到以下错误：

VM93567:77 TypeError: Cannot read property 'id' of undefined at DebugAppView._View_PetsComponent0.detectChangesInternal (PetsComponent.template.js:383:44) at DebugAppView.AppView.detectChanges (eval at (http://localhost:8080/vendor.js:729:2), :234:14) at DebugAppView.detectChanges (eval at (http://localhost:8080/vendor.js:729:2), :339:44) at DebugAppView.AppView.detectViewChildrenChanges (eval at (http://localhost:8080/vendor.js:729:2), :260:19) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:96:8) at DebugAppView.AppView.detectChanges (eval at (http://localhost:8080/vendor.js:729:2), :234:14) at DebugAppView.detectChanges (eval at (http://localhost:8080/vendor.js:729:2), :339:44) at DebugAppView.AppView.detectViewChildrenChanges (eval at (http://localhost:8080/vendor.js:729:2), :260:19) at DebugAppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.template.js:36:8) at DebugAppView.AppView.detectChanges (eval at (http://localhost:8080/vendor.js:729:2), :234:14) at 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) at eval (eval at (http://localhost:8080/vendor.js:291:2), :415:84) at Array.forEach (native) at 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) at eval (eval at (http://localhost:8080/vendor.js:291:2), :373:19) at eval (eval at (http://localhost:8080/vendor.js:291:2), :344:26) at 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) at ZoneDelegate.invoke (eval at (http://localhost:8080/polyfills.js:2780:2), :322:35) at Zone.run (eval at (http://localhost:8080/polyfills.js:2780:2), :216:44) at NgZoneImpl.runInner (eval at (http://localhost:8080/vendor.js:567:2), :77:71) at 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) at ApplicationRef_.bootstrap (eval at (http://localhost:8080/vendor.js:291:2), :364:21) at eval (eval at (http://localhost:8080/vendor.js:291:2), :148:50) at 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) at ZoneDelegate.invoke (eval at (http://localhost:8080/polyfills.js:2780:2), :322:35) at 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) at 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) at ZoneDelegate.invokeTask (eval at (http://localhost:8080/polyfills.js:2780:2), :355:43) at Zone.runTask (eval at (http://localhost:8080/polyfills.js:2780:2), :256:48) at drainMicroTaskQueue (eval at (http://localhost:8080/polyfills.js:2780:2), :474:36)

这是我的代码：

宠物class

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).

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

Answer 1

如果您设置 selectedPet 异步，类似于

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

可能适合你。

将对象属性绑定到输入文本

Binding object attribute to inputtext

json

primeng

angular