Angular4 using a collection of object

Question

I am working with Angular4 and I don't know how to declare a collection of objects and then adding an item and removing an item ? Thanks for your help

Here is what did : The Component :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    // tableaux d'objets
    personnes: Object[]=[{id:1, nom: "Alain"},{id: 2, nom: "Clémentine"},{id: 3, nom: "Cathy"}];
}

The template :

<table>
    <tr *ngFor="let personne of personnes">
        <td>{{personne.id}}</td>
        <td>{{personne.nom}}</td>
    </tr>
</table>

It works fine, but now I would want to manage my collection of objects, for instance the user will provide datas and I'll create a new object with those datas and I'll add this new object to my collection. I tried this, but it doesn't work :

personnes: Object[] = [];
personne: any = {{id:1, nom: "Alain"};
this.personnes.push(this.personne);

or

personnes: any[] = [];
personne: any = {{id:1, nom: "Alain"};
this.personnes.push(this.personne);

stackoverflow.com/questions/12870291/… google is your best friend — Jota.Toledo
– Jota.Toledo, Commented Jul 25, 2017 at 14:33
Please specify "a collection of objects" more detailed. What does a object look like? And what do you want to do with the collection? — Ma Kobi
– Ma Kobi, Commented Jul 25, 2017 at 14:48
hi just use as array of any , I would suggest to check documentation for this in the official site in (typescriptlang.org/docs/handbook/basic-types.html) , this is a test using you example plnkr.co/edit/vsQWITwK48beVWVCiiAI?p=preview — Americo Arvani
– Americo Arvani, Commented Jul 25, 2017 at 18:20

Americo Arvani · Accepted Answer · 2017-07-26 08:31:11Z

0

hi just use as array of any , I would suggest to check documentation for this in the official site in https://www.typescriptlang.org/docs/handbook/basic-types.html , this it is a test using your example http://embed.plnkr.co/vsQWITwK48beVWVCiiAI/

edited Jul 26, 2017 at 8:31

answered Jul 25, 2017 at 19:28

Americo Arvani

8761 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicolas Alain Over a year ago

hello, thanks for your solution wich works fine if I fire it as it but doesn't works if I create an angular project with anglar CLI (ng new prj-collection) and I copy/paste your code. Here is the first line of the errors messages : ERROR in M:/angular4/prj-collection/src/app/app.component.ts (9,31): Type '{ id: number; nom: string; }[]' is not assignable to type 'any[][]'. Type '{ id: number; nom: string; }' is not assignable to type 'any[]'. Object literal may only specify known properties, and 'id' does not exist in type 'any[]'... It misses that a reference, but which ?

Americo Arvani Over a year ago

Hi @NicolasAlain just remove [] from Array<any>, like that " personnes: Array<any>=[{id:1, nom: "Alain"},{id: 2, nom: "Clémentine"},{id: 3, nom: "Cathy"}]; "

Nicolas Alain Over a year ago

Wonderfull ! You are the best ;-)

Collectives™ on Stack Overflow

Angular4 using a collection of object

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related