如何在Angular中创建angular模型类或接口？

迪鲁宾
587 阅读3分钟

在这篇文章中，这篇文章涵盖了Angular中的一个逐步的教程

  • 如何在Angular应用程序中使用cli或手动创建一个模型类？
  • 如何在typescript应用程序中使用cli或手动生成一个模型接口？
  • 在Angular应用程序中何时使用类或接口来创建模型？
  • 在typescript中用对象数组初始化模型类
  • 在Angular模板文件中显示模型类的数据

Angular是一个前端UI框架，它从浏览器获取信息并将其发送到数据库。

为了存储这些信息，需要创建模型类。

模型类可以是接口或类的类型，让我们看看如何手动创建和添加属性

我们可以使用angular cli或在typescript中手动创建一个模型。

例如，让我们用Angular cli工具创建一个Employee类 如何用angular cli ng命令创建一个模型类

ng generate interface Employee --type=model or 
ng g interface Employee --type=model

这将在src/model中创建Employee.model.ts typecript空文件。

让我们在模型类中添加属性id、name和salary

Employee.model.ts

export interface Employee1 {
   id: number;
   firstName: string;
   lastName: string;
   salary: number;
}

以下是angular cli命令，用于在typescript应用程序中创建一个模型类

ng generate class EmployeeClass --type=model 
ng g class EmployeeClass --type=model

这将在src/models文件夹中创建EmployeeClass类。

手动添加所需的属性到EmployeeClass中

export class EmployeeClass { 
	private id: number;
	private name: string; 
	private salary:number;

}

Employee是一个模型类，它持有Employee类的属性数据，那么，你如何向模型类添加属性呢？你必须添加setter/getter或构造函数来初始化这个类

export class EmployeeClass {
  private id: number;
  private firstName: string;
  private lastName: string;
  private salary: number;

  constructor(id: number, firstName: string, lastName, salary: number) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
    this.salary = salary;
  }

  getName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  getYearlySalary(): number {
    return 12 * this.salary;
  }
}

Typecript中的接口

  • 接口是用来对数据进行类型检查的。
  • 这些接口只在编译/翻译阶段可用，在生产中不可用。
  • 接口定义了数据的类型，但不能创建接口的实例。
  • 没有方法来处理如何添加/获取操作的问题

类型脚本中的类

  • 类在javascript/typescript中只在ES6版本中可用。
  • 这也有助于进行类型检查
  • 在编译/转译的过程中，这将是可用的，并生成类的代码。
  • 你可以为数据操作添加自定义方法或setter/getter或构造函数。

Angular模型类的例子

在这个例子中，创建了模型类的变量数组，存储了数组数据，并在html文件中显示了数据。

如何在typescript中创建模型类的数组

  • 首先在你的Angular typescript组件中导入模型类

  • 声明模型类的变量EmployeeClass数组

  • 接下来，用固定的数据进行初始化

  • 雇员数据存储在模型数组--雇员

这里是完整的typescript组件

import { Component, VERSION } from "@angular/core";
import { EmployeeClass } from "../EmployeeClass";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  employees: EmployeeClass[] = [
    new EmployeeClass(1, "john", "sedwik", 5000),
    new EmployeeClass(2, "Ram", "Kumar", 6000),
    new EmployeeClass(3, "Fran", "andrew", 10000)
  ];
}

如何在angular模板文件中显示模型类的数据

一旦模型类的数据在一个变量中，使用ngFor指令，遍历所有的雇员。

在Angular html模板文件中，使用ngFor迭代显示模型数据。


<div *ngFor="let emp of employees">
  <span>{{emp.getName()}} -   <span>{{emp.getYearlySalary()}}

  <div>

总结

总之，我们可以在Angular应用程序中创建一个类或接口来保存模型数据，我也将从接口开始进行类型检查，如果有任何数据操作方法，将接口转换为类并在Angular应用程序中使用它。

avatar
文章
阅读
粉丝