核心.js：5980 错误类型错误：无法读取未定义(角度)的属性'Name'

Question

我不能生成带有棱角信息的卡片

我的模型:

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
}
}

card component typescript:

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

请检查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>

读取安全导航操作符(?.)或(!.)和null属性路径以获取更多详细信息。

Answer 2

是否有特定的需要使用order类?类需要被实例化。如果它不包含方法，并且没有明确的需要，我建议您使用TS Interface。它允许进行类型检查，而不需要使用"bloat">

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>