Sujet Précédent Sujet Suivant

Faire une boucle sur un Object avec Angular

Stephane_7008 Messages postés 2 Date d'inscription mardi 27 septembre 2022 Statut Membre Dernière intervention 27 septembre 2022 - 27 sept. 2022 à 16:33

Bonjour j'aimerai faire apparaitre une Card avec les données de mon objets

j'ai un objet dans un service 'IsService' et j'essaye de faire un ngFor et en même temps transmettre les informations au composant enfant

voici un petit schéma qui illustre mes composants:
 

Mon objet ce situant dans is-service.ts

public iServerList: Object = [
    {
      name: 'Is-dev',
      osInfo: 'Windows Server', cpuInfo: 'Intel® Core™ i7-8750H', ramInfo: '8Go',
      ag: false,
      cpu: 5,
      ram: 40,
      pathLog: '../../assets.'
    },
    {
      name: 'Ag-dev',
      osInfo: 'Windows Server', cpuInfo: 'Intel® Core™ i7-8750H', ramInfo: '8Go',
      ag: true,
      cpu: 5,
      ram: 40,
      pathLog: '../../assets.'
    },
    {
      name: 'Is-prd',
      osInfo: 'Windows Server', cpuInfo: 'Intel® Core™ i7-8750H', ramInfo: '8Go',
      ag: false,
      cpu: 5,
      ram: 40,
      pathLog: '../../assets.'
    },
    {
      name: 'Ag-prd',
      osInfo: 'Windows Server', cpuInfo: 'Intel® Core™ i7-8750H', ramInfo: '8Go',
      ag: true,
      cpu: 5,
      ram: 40,
      pathLog: '../../assets.'
    }
  ];

j'ai envie de récupérer les données donc j'ai dans un premier temps ajouter le service dans le constructor

constructor(private isService : IsService) {}

ensuite

iServerLists : object = []
  iServerList = of(this.isService.getIServerList());

ngOnInit(): void {
  this.iServerList.subscribe(x => this.iServerLists = x)
}


Mais je n'arrive pas a le bouclé.

J'ai essayé
 

<div class="si-list">
    <div *ngFor="let iS of iServerLists">
        <app-si-details [inputISName]="iS"></app-si-details>
    </div>
</div>