迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

Angular 中的对象数组

作者:迹忆客 最近更新:2023/03/23 浏览次数:

在本文中,我们通过示例讨论 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 中的别名对象类型数组

我们可以使用接口类型声明一个对象数组。如果对象具有多个属性并且难以处理,则开销方法存在一些缺陷,并且这种方法创建了一个接口来保存 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)
  }
}

输出:

使用 Angular 接口的对象数组

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便