Prime Community Forum

Posted: **08 Jun 2016, 18:06**

I created my own custom pipe to simply do search on my datatable and it works fine as :

      <p-dataTable [value]="clients | clientSearchPipe">
                        <p-column field="fullName" header="Full Name"></p-column>
                    </p-dataTable>

I have now added a crud operation to add new clients to the list, however the change is NOT being reflected on the datatable once I press "add".
My service pushes a new client onto the "clients" array.

I can see the change is reflected fine on another portion of the site.

<ul><li *ngFor="#client of clients">{{client.fullName}}</li></ul>

When I add new client, a new entry is added to the <ul>, but not to the datatable.
The data is there, as I type something in my 'search', the new values will be shown in the datatable as well, however still not when I press the "add".

Perhaps my service is not doing something right, as I do not use http.get but rather simple hard coded json.

In AppComponent:

Code: Select all

export class ClientsComponent implements OnInit {

    @Input() searchInput;

    clients: Client[];

    constructor(private clientService: ClientService) { }

    ngOnInit() {
        this.clients = this.clientService.getClients();
        //console.log(this.clients);
    }

    addNewClient(firstName, lastName) {
        let client = new Client(firstName, lastName);
        this.clientService.addNewClient(client);

        console.log(this.clients);
    }

}

In service

Code: Select all

@Injectable()
export class ClientService {

    clients: Client[] = [];

    constructor() { }

    addNewClient(client) {
        this.clients.push(client);
        this.sortClients();
    }

    getClients() {

        this.clients.push(
            new Client("Timur", "Rzumbaev"),
            new Client("Uriy", "Gagarin"),
            new Client("Vladimir", "Putin"),
            new Client("Justin", "Trudeau"),
            new Client("Donald", "Trump"),
            new Client("Pepites", "DePoules")
        );
   

        this.sortClients();

        return this.clients;
    }
 
}

Prime Community Forum

Pipe prevents DataTable from updating.

Pipe prevents DataTable from updating.