मैं कोणीय में जानकारी के साथ कार्ड उत्पन्न नहीं कर सकता

मेरा मॉडल:

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

}

कार्ड घटक एचटीएमएल:

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

यह कहता है कि जब मैं स्ट्रिंग को प्रक्षेपित करता हूं तो त्रुटि मेरे एचटीएमएल पर होती है

0
user15025231 19 जिंदा 2021, 13:35

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>

पढ़ें सुरक्षित नेविगेशन ऑपरेटर (?.) या (!.) और शून्य संपत्ति पथ अधिक जानकारी के लिए।

2
Giannis 19 जिंदा 2021, 13:51

क्या order के लिए कक्षा का उपयोग करने की कोई विशेष आवश्यकता है? कक्षाओं को तत्काल करने की आवश्यकता है। यदि इसमें विधियाँ नहीं हैं और यदि स्पष्ट आवश्यकता नहीं है, तो मैं आपको TS इंटरफ़ेस। यह कक्षा के साथ आने वाले "ब्लोट" के बिना टाइप चेकिंग की अनुमति देता है।

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

फिर आप संभावित 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>
2
Michael D 19 जिंदा 2021, 13:50