core.js:5980 ERROR TypeError: Cannot read property 'Name' of undefined (angular)

Question

我无法使用 angular

中的信息生成卡片

我的模特：

export class order {
    Name!: string
    Surname!: string
    Email!: string
    Type!: string
    Description!: string

    constructor(name: string, surname: string, email: string, type: string, desc: string) {
        this.Name = name,
            this.Surname = surname,
            this.Email = email,
            this.Type = type,
            this.Description = desc
    }
}

卡片组件打字稿：

import { Component, Input, OnInit } from '@angular/core';
import { order } from 'src/app/shared models/order.model';

@Component({
  selector: 'app-contact-card',
  templateUrl: './contact-card.component.html',
  styleUrls: ['./contact-card.component.css']
})
export class ContactCardComponent implements OnInit {
  @Input()
  item!: order;
  constructor() { }

  ngOnInit(): void {
  }

}

卡片组件html:

<div class="card">
    <h3>{{item.Name}} {{item.Surname}}</h3>
    <div class="flex">
        <p>{{item.Email}}</p>
        <p>{{item.Type}}</p>
    </div>
    <p>{{item.Description}}</p>
</div>

它说当我插入字符串

时错误在我的html

Answer 1

是否需要为 order 使用 class？ 类需要实例化。如果它不包含方法并且没有明确的需要，我建议您改用 TS Interface。它允许进行类型检查，而不会出现 class.

带来的“膨胀”

export interface order {
    Name!: string;
    Surname!: string;
    Email!: string;
    Type!: string;
    Description!: string;
}

然后您可以在 Angular 模板中使用安全导航运算符 ?. 以避免潜在的 undefined 错误。它会在尝试访问对象的属性之前检查对象是否已定义。

<div class="card">
    <h3>{{item?.Name}} {{item?.Surname}}</h3>
    <div class="flex">
        <p>{{item?.Email}}</p>
        <p>{{item?.Type}}</p>
    </div>
    <p>{{item?.Description}}</p>
</div>

Answer 2

请检查 item 的值。可能是 null 或 undefined，这就是发生此错误的原因。为了避免这个错误，请尝试以下操作：

<div class="card">
    <h3>{{item?.Name}} {{item?.Surname}}</h3>
    <div class="flex">
        <p>{{item?.Email}}</p>
        <p>{{item?.Type}}</p>
    </div>
    <p>{{item?.Description}}</p>
</div>

阅读 了解更多详情。