core.js: 5980 ОШИБКА TypeError: Не удается прочитать свойство «Имя» неопределенного (углового)

Я не могу создать карту с информацией в 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, когда я интерполирую строку


angular model string-interpolation angular-event-emitter
person user15025231    schedule 19.01.2021    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Пожалуйста, проверьте значение 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>

Прочтите оператор безопасной навигации (?.) или (!.) и нулевое свойство пути для более подробной информации.

person Giannis    schedule 19.01.2021

arrow_upward
2
arrow_downward

Есть ли особая необходимость использовать класс для order? Классы должны быть созданы. Если он не содержит методов и в этом нет явной необходимости, я бы рекомендовал вам использовать TS Интерфейс вместо этого. Это позволяет проверять типы без раздувания, которое приходит с классом.

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>
person Michael D    schedule 19.01.2021