cmglez10 / ng-datatable

DataTable - Simple table component with sorting and pagination for Angular2
8 stars 5 forks source link

My data not display #1

Closed kmal47 closed 6 years ago

kmal47 commented 6 years ago

Im having problem in display the data from my firebase realtime database. Can you help me?

Below are my app.component.ts

 @Component({
 selector: 'app-employee-list',
   templateUrl: './employee-list.component.html',
 styleUrls: ['./employee-list.component.css']
 })
 export class EmployeeListComponent implements OnInit {
  employeeList: Employee[];
  constructor(private employeeService: EmployeeService, private tostr: ToastrService,
   ) { }

  ngOnInit() {
    var x = this.employeeService.getData();
    x.snapshotChanges().subscribe(item => {
     this.employeeList = [];
     item.forEach(element => {
       var y = element.payload.toJSON();
    y["$key"] = element.key;
    this.employeeList.push(y as Employee);

      });
     });
 }

  onEdit(emp: Employee) {
    this.employeeService.selectedEmployee = Object.assign({}, emp);
  }

  onDelete(key: string) {
    if (confirm('Are you sure to delete this record ?') == true) {
      this.employeeService.deleteEmployee(key);
     this.tostr.warning("Deleted Successfully");
    }
  }

}

below are my app.component.html

<table class="table table-striped" [mfData]="employeeList" #mf="mfDataTable" 
[mfRowsOnPage]="5">
  <thead>
  <tr>
      <th style="width: 20%">
        <mfDefaultSorter by="serialnumber">Serial Number</mfDefaultSorter>
      </th>
       <th style="width: 50%">
        Asset Description
      </th>
   </tr>
  </thead>
  <tbody>
  <tr *ngFor="let employee of mf.employeeList">
    <td>{{employee.serialnumber}}</td>
   <td>{{employee.detailspecification}}</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
     <td colspan="4">
      <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
     </td>
   </tr>
   </tfoot>
  </table>
cmglez10 commented 6 years ago

You have a little bug in your app.component.html

Please change the line:

<tr *ngFor="let employee of mf.employeeList">

by

<tr *ngFor="let employee of mf.data">

Object mf data always is in mf.data

Please try it and let me know the result

kmal47 commented 6 years ago

haha,its worked!thanks bro.Working on it for three days.You saved my life.

cmglez10 commented 6 years ago

Great!