Tableau d'objets en Angular

1. Tableau d’objets en Angular
2. Tableau de type d’objet Alias ​​dans Angular

Dans cet article, nous discutons du tableau d’objets dans Angular avec des exemples et de son fonctionnement.

Tableau d’objets en Angular

Lorsque vous travaillez sur des applications Angular, il existe de nombreuses situations où nous devons créer des tableaux d’objets. Commençons par un exemple de tableau d’objets en TypeScript.

Nous devons déclarer un tableau d’objets en leur donnant des valeurs et des types de Array, pour contenir un tableau d’objets. Un tableau d’objets est rempli et affiche un affichage de bouton radio ou sur la liste déroulante.

Il existe de nombreuses façons de faire un objet d’un tableau. Nous pouvons déclarer et réinitialiser un tableau en utilisant n’importe quel type d’objet déclaré.

Les objets ont les propriétés de contenir des clés et des valeurs. Nous allons montrer comment un tableau de chaînes peut être déclaré et réinitialisé dans la syntaxe donnée.

# Angular

shapes:Array<string> = ['Triangle','Square','Rectangle'];

Production:

En TypeScript, nous pouvons revendiquer un objet en utilisant n’importe quel type. Créons un objet fruits dans l’exemple suivant.

# Angular

public fruits: Array<any> = [
    { title: "Banana", color: "Yellow" },
    { title: "Apple", color: "Red" },
    { title: "Guava", color: "Green" },
    { title: "Strawberry", color: "Red" }
  ];

Le type object(<any>) peut être remplacé.

# Angular

public fruits: Array<object> = [
    { title: "Banana", color: "Yellow" },
    { title: "Apple", color: "Red" },
    { title: "Guava", color: "Green" },
    { title: "Strawberry", color: "Red" }
  ];

Tableau de type d’objet Alias ​​dans Angular

L’utilisation du mot-clé type dans le TypeScript permet de créer un nouvel alias pour un type personnalisé. Conception de l’alias d’objet Fruit et assemblage d’un tableau d’alias de type.

# AngularJs

type Fruit = Array<{ id: number; name: string }>;

Dans l’exemple suivant, nous créons un alias Fruit de type tableau et initialisons Array avec des valeurs d’objet.

Code - app.component.ts:

# Angular
import { Component } from '@angular/core';

type Fruit = Array<{ id: number; name: string }>;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  fruits: Fruit = [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Guava" },
    { id: 4, name: "Strawberry" }
  ];
  constructor() {}
  ngOnInit() {}
}

Maintenant, nous affichons l’objet sur le fichier frontal.

Code - app.component.html:

# angular
<ul>
  <li *ngFor="let fruit of fruits">{{fruit.name}}</li>
</ul>

Production:

Nous pouvons déclarer un tableau d’objets en utilisant le type d’interface. L’approche de la surcharge a quelques défauts si l’objet a plusieurs propriétés et est difficile à gérer, et cette approche crée une interface pour contenir les données d’objet dans Angular et Typescript.

Il est utile de gérer les données provenant du backend/de la base de données via l’API REST (API RESTful). Nous pouvons créer une interface en utilisant la commande ci-dessous.

# Angular

ng g interface Fruit

Il développe un fichier fruit.ts.

# Angular

export interface fruits {
  id: number;
  name: string;

  constructor(id,name) {
      this.id = id;
      this.name = name;
    }
}

Dans le composant Angular TypeScript, nous pouvons créer une interface pour les fruits.

# Angular

import { Component, OnInit } from "@angular/core";
import {Fruit} from './Fruit'
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class appComponent implements OnInit {
  public fruits: Fruit[] = [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Guava" },
    { id: 4, name: "Strawberry" }
  ];
  constructor() {}

  ngOnInit() {
  console.log(this.fruits)
  }
}

Production: