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
  <li *ngFor="let fruit of fruits">{{fruit.name}}</li>
	我们可以使用接口类型声明一个对象数组。如果对象具有多个属性并且难以处理，则开销方法存在一些缺陷，并且这种方法创建了一个接口来保存 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)