组件的@Input突然产生错误

Question

So i have this ultra weird scenario...

I left my application working perfectly fine a week ago and got back to work on it today, realizing the dropdown i have doesn't work anymore...

I have the super simple Component:

import {Component, Input} from '@angular/core';
import {Card} from "../../entities/Card";

@Component({
    selector: 'card-details',
    templateUrl: './app/components/card-details/CardDetails.html',
})
export class CardDetailsComponent {
    @Input() card: Card;

    constructor() {}
}

HTML:

<template #cardDetails>
    <label>{{card.cardNumber}}</label>
    <br/>
    <label>{{card.cardNetwork}}</label>
    <br/>
    <label>{{card.type}}</label>
</template>
<button class="dropdown-item" placement="right" [ngbTooltip]="cardDetails">
    {{card.cardName}}
</button>

And the Parent Component's relevant html code:

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu" ngbDropdownToggle>Choose a card..</button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenu">
        <card-details *ngFor="let card of cards; let i = index" [card]="card" (click)="selectCard(i)"></card-details>
    </div>
</div>

Currently I'm receiving an error saying it couldn't read the card's properties, cannot read property cardName of undefined .

Feels like i have to mention it again, I changed literally -nothing- in my code, the dropdown worked perfectly fine displaying all the details, just ran it again after a week.

Any ideas?

Thanks in advance for all the help, let me know if something is missing

EDIT

Might be worth noting that placing a console.log(JSON.stringify(this.card) on the ngOnInit it has the card filled with the data. So it is filled with the correct data from the DB but still produces this error.

Edit2

Moreover, inspecting the HTML Elements I can see that there are exactly two card-details containing their correct names... so what is the problem here? :O

UPDATE

Again, cannot find any logic in that -> i initialized it with a:

let defaultCard: Card = new Card();
defaultCard.cardName = "default";
defaultCard.cardNetwork = "whatever";
defaultCard.cardNumber = 1564987;
defaultCard.type = "Debit";

and now the logs within the ctor and ngOnInit :

ctor
{"cardName":"default","cardNetwork":"whatever","cardNumber":1564987,"type":"Debit"}
ctor
{"cardName":"default","cardNetwork":"whatever","cardNumber":1564987,"type":"Debit"}
init
{"cardNumber":208461269,"cardName":"Magic Card","cardNetwork":"American Express","type":"Credit"}
init
{"cardNumber":220319960,"cardName":"Men Card","cardNetwork":"Visa","type":"Debit"}

Please, any insights would help me a lot!

Answer 1

You're looping through the cards list. If you didn't change anything in your code and it suddenly starts to fail - something probably changed your data. Check your database? or where you read your cards from - they're probably reading empty cards.

Make sure where the error originates from where you think it does. Debugging the code that we can not see will help you pinpoint the error.

Answer 2

Can you try referencing card?.cardName instead? The component might be getting undefined for a fraction of a second. If that works (or not) it might points us in the right direction?