Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular 4- Zero Configuration not showing Data after insert input on Search Input or reOrder the collumns

See original GitHub issue

Whenever i click on column to reorder on fill the search input, the data simple disappear doesnt apper till i refresh the app

angular cli

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "untitled"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": ["styles.css","users.css",
        "../node_modules/bootstrap3/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/datatables.net-dt/css/jquery.dataTables.css"],
      "scripts": ["../node_modules/jquery/dist/jquery.slim.min.js","../node_modules/bootstrap3/dist/js/bootstrap.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js"],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [
    "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

componente `@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {
 private _data:Produto[];
 constructor() {
}

public get data(): Produto[] {
}
  ngOnInit(): void {
//here i initiliaze using http request
  }
}

<table  datatable class="table table-hover table-striped">
          <thead>
          <tr>
            <th></th>
            <th>NOME</th>
            <th>Quantidade</th>
          </tr>
          </thead>

          <tbody>
          <tr *ngFor="let produto of basket">
            <td>
              <img [src]=" produto.imagem | coalesce:'http://localhost:8080/static/images/default.jpg' " width="35px"
                   alt="Imagem do produto">
            </td>
            <td> {{produto.nome}}</td>
            <td>{{produto.quantidade}}</td>
          </tr>
          </tbody>
        </table>

Issue Analytics

State:
Created 6 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

davidhrcommented, Jun 1, 2017

Try with ([dtTrigger])="dtTrigger".

0reactions

Delfimarimecommented, Jun 1, 2017

render the datatable but still have the filter or reorder issue

Top Results From Across the Web

AngularJS to Angular concepts: Quick reference

ng-hide In AngularJS, the ng-hide directive shows or hides the associated HTML element based on an expression. For more information, see ng-show. Bind...

CUSTOM_ELEMENTS_SCHEMA added to NgModule ...

This is fixed by: a) adding schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to every component or. b) adding import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ......

48 answers on StackOverflow to the most popular Angular ...

We have to import OnInit in order to use like this (actually implementing OnInit is not mandatory but considered good practice): import { ......

Form inputs - DataTables example

In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which...

Table - PrimeNG - PrimeFaces

Following sample has a table of 4 columns and retrieves the data from a service on ngOnInit. ... Content to display when there...