时间戳

首页 > 解决方案 > 打字稿将计算值添加到类

angular - 打字稿将计算值添加到类

问题描述

在一个带有 Typescript 的 Angular 项目中，我有一个具有出生日期（dob）属性的类 Person，但在视图中我希望能够显示一个计算值 - 年龄。

人.模型.ts

import { differenceInYears, parse } from "date-fns"
export class Person {
  constructor(
    public name: string,
    public dob: Date,
  ) { }
}

//fake data
export let persons:Person[]=[];
  persons = [
    new Person("John", new Date('1976-01-26T00:00:00')),
    new Person("Julia", new Date('1995-12-17T03:24:00')),
    new Person("John", new Date('1967-07-05T00:00:01')),
    new Person("Ryan", new Date('2010-05-14T00:00:01'))
  ]

interface PersonWithAge extends Person {
  readonly age: number;
}

export function toPersonWithAge(person: Person): PersonWithAge  {
    const birthDate = person.dob;
    const age = differenceInYears(birthDate, new Date() )
    return {
      ...person,
      age
    }
}

人.component.ts

export class PersonComponent implements OnInit {

   constructor() { }
   persons=persons;

   ngOnInit(): void {
       }
 }

假设到目前为止的方法是正确的，那么下一步我将如何以及在哪里（文件名）将人员数组转换为 PersonWithAge 数组，以便我可以在带有 *ngFor 的 html 模板中使用它。

我是 Typescript 的新手，所以最好给出详细的答案。

标签： angulartypescript

解决方案

人.模型.ts

import { differenceInYears, parse } from "date-fns"

enum sex {Female="Female", Male="Male"}

export class Person {
  constructor(
    public firstname: string,
    public middlename: string,
    public lastname: string,
    public sex: sex,
    public dob: Date,
  ) { }
}

export let persons:Person[]=[];
  persons = [
    new Person("John", "Barry", "Eastwood", sex.Male, new Date('1976-01-26T00:00:00')),
    new Person("Julia", "Marie", "Roberts", sex.Female, new Date('1995-12-17T03:24:00')),
    new Person("John", "Travis", "Travolta", sex.Female, new Date('1967-07-05T00:00:01')),
    new Person("Ryan", "William", "Davis", sex.Male, new Date('2010-05-14T00:00:01'))
  ]

export interface PersonWithAge extends Person {
  readonly age: number;
}

export function toPersonWithAge(person: Person): PersonWithAge  {
    const birthDate = person.dob;
    const age = differenceInYears( new Date(), birthDate )
    return {
      ...person,
      age
    }
}

有年龄的人.component.ts

import { Component, OnInit } from '@angular/core';
import { persons, toPersonWithAge, PersonWithAge } from '../models/person.model';
import { of, map, Observable } from 'rxjs';


interface MyComponentView {
  readonly persons: ReadonlyArray<PersonWithAge>;
}

@Component({
  selector: 'app-person-with-age',
  templateUrl: './person-with-age.component.html',
  styleUrls: ['./person-with-age.component.css']
})
export class PersonWithAgeComponent implements OnInit {

  constructor() { }

  readonly persons$ = of(persons);

  readonly vm$: Observable<MyComponentView> = this.persons$.pipe(
  map(persons => persons.map(toPersonWithAge)),
  map(persons => ({ persons }))
  )

  ngOnInit(): void {
  }
}

然后在视图中：

有年龄的人.component.html

<ul *ngIf="vm$ | async as vm">
<table class="table table-striped">
<thead>
<tr>
  <th scope="col">Firstname</th>
  <th scope="col">Lastname</th>
  <th scope="col">DOB</th>
  <th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let person of vm.persons"><td>{{ person.firstname }}</td><td>{{ person.lastname }}</td><td>{{ person.dob | date }}</td><td>{{ person.age }}</td></tr>
</tbody>
</table>

在这里工作小提琴：https ://stackblitz.com/edit/angular-ivy-61jgzn?file=src%2Fapp%2Fperson-with-age%2Fperson-with-age.component.html

推荐阅读