Array von Objekten in Angular

1. Array von Objekten in Angular
2. Alias-Objekttyp-Array in Angular

In diesem Artikel besprechen wir das Array von Objekten in Angular mit Beispielen und wie es funktioniert.

Array von Objekten in Angular

Bei der Arbeit an Angular-Anwendungen gibt es viele Situationen, in denen wir Arrays von Objekten erstellen müssen. Beginnen wir mit einem Beispiel für ein Array von Objekten in TypeScript.

Wir müssen ein Array von Objekten deklarieren, indem wir ihnen Werte und Typen von Array geben, um ein Array von Objekten aufzunehmen. Ein Array von Objekten wird gefüllt und zeigt eine Optionsschaltflächenanzeige oder in der Dropdown-Liste.

Es gibt viele Möglichkeiten, wie wir ein Objekt aus einem Array machen können. Wir können ein Array deklarieren und zurücksetzen, indem wir einen beliebigen deklarierten Objekttyp verwenden.

Die Objekte haben die Eigenschaften, Schlüssel und Werte zu enthalten. Wir werden zeigen, wie ein Array von Strings in der gegebenen Syntax deklariert und zurückgesetzt werden kann.

# Angular

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

Ausgabe:

In TypeScript können wir ein Objekt mit jedem beliebigen Typ beanspruchen. Lassen Sie uns im folgenden Beispiel ein Objekt fruits erstellen.

# Angular

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

Der Objekttyp (<any>) kann ersetzt werden.

# Angular

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

Alias-Objekttyp-Array in Angular

Die Verwendung des Typschlüsselworts in TypeScript ermöglicht das Erstellen eines neuen Alias ​​für einen benutzerdefinierten Typ. Entwarf den Objektalias Fruit und stellte eine Reihe von Typenaliasen zusammen.

# AngularJs

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

Im nächsten Beispiel erstellen wir einen Fruit-Alias ​​vom Typ Array und initialisieren Array mit Objektwerten.

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

Jetzt zeigen wir das Objekt in der Frontend-Datei an.

Code - app.component.html:

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

Ausgabe:

Wir können ein Array von Objekten deklarieren, indem wir den Schnittstellentyp verwenden. Der Overhead-Ansatz hat einige Mängel, wenn das Objekt mehrere Eigenschaften hat und Hürden zu bewältigen sind, und dieser Ansatz erstellt eine Schnittstelle zum Speichern von Objektdaten in Angular und TypeScript.

Es ist sinnvoll, Daten, die aus dem Backend/der Datenbank kommen, über die REST-API (RESTful APIs) zu verarbeiten. Wir können eine Schnittstelle erstellen, indem wir den unten gezeigten Befehl verwenden.

# Angular

ng g interface Fruit

Es entwickelt eine fruit.ts-Datei.

# Angular

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

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

In der Angular TypeScript-Komponente können wir eine Schnittstelle für Früchte erstellen.

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

Ausgabe: