修改

Question

所以我有这种超奇怪的场景......

我让我的应用程序在一周前工作得非常好并且今天又重新开始工作，意识到我已经不再工作的下拉了......

我有超级简单的组件：

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>

父组件的相关html代码：

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

目前我收到一条错误消息，说无法读取该卡的属性cannot read property cardName of undefined。

感觉就像我必须再次提到它一样，我在字面上改变了 - 没有 - 在我的代码中，下拉工作完全正常显示所有细节，只是在一周后再次运行。

有什么想法吗？

提前感谢所有帮助，如果遗漏了某些内容，请告诉我

修改

可能值得注意的是，在console.log(JSON.stringify(this.card)上放置ngOnInit，其中的卡片中充满了数据。因此，它填充了来自DB的正确数据，但仍然会产生此错误。

EDIT2

此外，检查HTML元素我可以看到正好有两个card-details包含正确的名称......那么这里的问题是什么？：o

更新

再次，找不到任何逻辑 - ＆gt;我用a：

初始化它

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

现在是ctor和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"}

拜托，任何见解都会对我有所帮助！

Answer 1

您正在遍历cards列表。如果您没有更改代码中的任何内容并且它突然开始失败 - 可能会改变您的数据。检查你的数据库？或者你从哪里读卡 - 他们可能会读空卡。

确保错误源自您认为的位置。调试我们看不到的代码将帮助您查明错误。

Answer 2

您可以尝试引用card?.cardName吗？该组件可能在几分之一秒内未定义。如果这有用（或没有），它可能会指出我们正确的方向？

组件的@Input突然产生错误

修改

EDIT2

更新

2 个答案: