Array de objetos en Angular

1. Array de objetos en Angular
2. Alias Objeto Tipo Array en Angular

En este artículo, discutimos el Array de objetos en Angular con ejemplos y cómo funciona.

Array de objetos en Angular

Mientras trabajamos en aplicaciones Angular, hay muchas situaciones en las que tenemos que crear matrices de objetos. Comencemos con un ejemplo de un array de objetos en TypeScript.

Tenemos que declarar un array de objetos dándoles valores y tipos de Array, para contener un array de objetos. Se rellena un array de objetos y se muestra una pantalla de botón de radio o en el menú desplegable.

Hay muchas maneras en que podemos hacer un objeto de un array. Podemos declarar y restablecer un array utilizando cualquier tipo de objeto declarado.

Los objetos tienen las propiedades para contener claves y valores. Mostraremos cómo se puede declarar y restablecer un array de cadenas en la sintaxis dada.

# Angular

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

Producción:

En TypeScript, podemos reclamar un Objeto usando cualquier tipo. Vamos a crear un objeto frutas en el siguiente ejemplo.

# Angular

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

El tipo de objeto (<cualquiera>) se puede reemplazar.

# Angular

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

Alias Objeto Tipo Array en Angular

Operar la palabra clave type en TypeScript permite crear un nuevo alias para un tipo personalizado. Diseñó el alias del objeto Fruit y ensambló un array de alias de tipo.

# AngularJs

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

En el siguiente ejemplo, creamos un alias Fruit de tipo matriz e inicializamos Array con valores de objeto.

Código - 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() {}
}

Ahora, mostramos el objeto en el archivo frontal.

Código - app.component.html:

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

Producción:

Podemos declarar un array de objetos utilizando el tipo de interfaz. El enfoque general tiene algunas fallas si el objeto tiene múltiples propiedades y es difícil de manejar, y este enfoque crea una interfaz para almacenar datos de objetos en Angular y TypeScript.

Es útil para manejar los datos que llegan desde el backend/base de datos a través de la API REST (API RESTful). Podemos hacer una interfaz usando el comando que se muestra a continuación.

# Angular

ng g interface Fruit

Desarrolla un archivo fruit.ts.

# Angular

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

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

En el componente Angular TypeScript, podemos hacer una interfaz para frutas.

# 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)
  }
}

Producción: