Loading data in a new component after generating an entity #5440

system15 created 6 years ago

Hi there I'm trying to load data into a new component after generating an entity using aspnet zero power tools. I've create a customer entity ok and this is shown on the dashboard as a list of customers in a html table format but what I want to do is when I select a row from the customer list to view or edit I want to pass that data to a new custom component I've created that's not a modal like the one that comes out of the box. I've tried to copy the code in the customer modal component but it doesn't work.

Here is the code below customers.component.ts

import{Component, Injector, ViewEncapsulation, ViewChild}from '@angular/core';import{ActivatedRoute}from '@angular/router';import{Http}from '@angular/http';import{CustomersServiceProxy, CustomerDto}from '@shared/service-proxies/service-proxies';import{NotifyService}from '@abp/notify/notify.service';import{AppComponentBase}from '@shared/common/app-component-base';import{TokenAuthServiceProxy}from '@shared/service-proxies/service-proxies';import{CreateOrEditCustomerModalComponent}from './create-or-edit-customer-modal.component';import{ViewCustomerModalComponent}from './view-customer-modal.component';import{appModuleAnimation}from '@shared/animations/routerTransition';import{DataTable}from 'primeng/components/datatable/datatable';import{Paginator}from 'primeng/components/paginator/paginator';import{LazyLoadEvent}from 'primeng/components/common/lazyloadevent';import{FileDownloadService}from '@shared/utils/file-download.service';import * as moment from 'moment';@Component({templateUrl: './customers.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()]})export class CustomersComponent extends AppComponentBase{@ViewChild('createOrEditCustomerModal') createOrEditCustomerModal: CreateOrEditCustomerModalComponent; @ViewChild('viewCustomerModalComponent') viewCustomerModal: ViewCustomerModalComponent; @ViewChild('dataTable') dataTable: DataTable; @ViewChild('paginator') paginator: Paginator; advancedFiltersAreShown=false;filterText='';titleFilter='';firstnameFilter='';lastnameFilter='';homeTelephoneNumberFilter='';mobileTelephoneNumberFilter='';emailAddressFilter='';emergencyContactNumberFilter='';parentTypeFilter='';requestPrescriptionFilter='';address1Filter='';address2Filter='';address3Filter=''; constructor( injector: Injector, private _http: Http, private _customersServiceProxy: CustomersServiceProxy, private _notifyService: NotifyService, private _tokenAuth: TokenAuthServiceProxy, private _activatedRoute: ActivatedRoute, private _fileDownloadService: FileDownloadService ){super(injector);}getCustomers(event?: LazyLoadEvent){if (this.primengDatatableHelper.shouldResetPaging(event)){this.paginator.changePage(0); return;}this.primengDatatableHelper.showLoadingIndicator(); this._customersServiceProxy.getAll(this.filterText,this.titleFilter,this.firstnameFilter,this.lastnameFilter,this.homeTelephoneNumberFilter,this.mobileTelephoneNumberFilter,this.emailAddressFilter,this.emergencyContactNumberFilter,this.parentTypeFilter,this.requestPrescriptionFilter,this.address1Filter,this.address2Filter,this.address3Filter, this.primengDatatableHelper.getSorting(this.dataTable), this.primengDatatableHelper.getSkipCount(this.paginator, event), this.primengDatatableHelper.getMaxResultCount(this.paginator, event) ).subscribe(result=>{this.primengDatatableHelper.totalRecordsCount=result.totalCount; this.primengDatatableHelper.records=result.items; this.primengDatatableHelper.hideLoadingIndicator();});}reloadPage(): void{this.paginator.changePage(this.paginator.getPage());}createCustomer(): void{this.createOrEditCustomerModal.show();}deleteCustomer(customer: CustomerDto): void{this.message.confirm( '', (isConfirmed)=>{if (isConfirmed){this._customersServiceProxy.delete(customer.id) .subscribe(()=>{this.reloadPage(); this.notify.success(this.l('SuccessfullyDeleted'));});}});}exportToExcel(): void{this._customersServiceProxy.getCustomersToExcel(this.filterText,this.titleFilter,this.firstnameFilter,this.lastnameFilter,this.homeTelephoneNumberFilter,this.mobileTelephoneNumberFilter,this.emailAddressFilter,this.emergencyContactNumberFilter,this.parentTypeFilter,this.requestPrescriptionFilter,this.address1Filter,this.address2Filter,this.address3Filter,) .subscribe(result=>{this._fileDownloadService.downloadTempFile(result);});}}

customers.component.html

// This is auto generated using the aspnet zero power tools

viewdetail.component.ts

import{Component, Injector, ViewEncapsulation, ViewChild, Output, EventEmitter}from '@angular/core';import{AppComponentBase}from '@shared/common/app-component-base';import{appModuleAnimation}from '@shared/animations/routerTransition';import{NewOrderModalComponent}from './new-order-modal.component';import{Address}from '../address/address';import{GetCustomerForView, CustomerDto}from '@shared/service-proxies/service-proxies';declare var WizardDemo: any;declare var FormHelper: any;@Component({templateUrl: './viewdetail.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()]})export class ViewdetailComponent extends AppComponentBase{//variables calendarValue: Date deliveryAddres: string dummyAddresses=[] active=false; //Display modal on the customer component when the new order button is clicked. @ViewChild('newOrderModal') newOrderModal: NewOrderModalComponent; @Output() modalSave: EventEmitter<any>=new EventEmitter<any>(); item: GetCustomerForView; constructor( injector: Injector ){super(injector); this.item=new GetCustomerForView(); this.item.customer=new CustomerDto();}ngOnInit(){this.dummyData()}}

viewdetail.component.html doesn't render{{item.customer.firstname}}based on the row selected in the list

{{item.customer.firstname}}

4 Answer(s)