Angular 中的物件陣列

1. Angular 中的物件陣列
2. Angular 中的別名物件型別陣列

在本文中，我們通過示例討論 Angular 中的物件陣列及其工作原理。

Angular 中的物件陣列

在處理 Angular 應用程式時，在許多情況下我們必須建立物件陣列。讓我們從 TypeScript 中的物件陣列的示例開始。

我們必須通過賦予物件陣列的值和型別來宣告物件陣列，以儲存物件陣列。填充物件陣列並顯示單選按鈕顯示或下拉選單。

有很多方法可以建立陣列的物件。我們可以使用宣告的任何物件型別來宣告和重置陣列。

物件具有包含鍵和值的屬性。我們將展示如何在給定的語法中宣告和重置字串陣列。

# Angular

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

輸出：

在 typescript 中，我們可以使用任何型別宣告一個 Object。讓我們在以下示例中建立一個 fruits 物件。

# Angular

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

object(<any>) 型別可以被替換。

# Angular

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

Angular 中的別名物件型別陣列

在 typescript 中操作 type 關鍵字允許為自定義型別建立新別名。設計了 Fruit 物件別名並組裝了一個別名型別陣列。

# AngularJs

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

在下一個示例中，我們建立陣列型別的 Fruit 別名並使用物件值初始化 Array。

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

現在，我們在前端檔案中顯示物件。

程式碼 - app.component.html：

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

輸出：

我們可以使用介面型別宣告一個物件陣列。如果物件具有多個屬性並且難以處理，則開銷方法存在一些缺陷，並且這種方法建立了一個介面來儲存 Angular 和 typescript 中的物件資料。

通過 REST API（RESTful APIs）處理從後端/資料庫到達的資料很有用。我們可以使用如下所示的命令來製作介面。

# Angular

ng g interface Fruit

它開發了一個 fruit.ts 檔案。

# Angular

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

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

在 Angular TypeScript 元件中，我們可以為水果製作一個介面。

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

輸出：