0

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

一周前我离开我的应用程序工作得很好，今天又开始工作，意识到我的下拉菜单不再工作了......

我有超级简单的组件：

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它上面放置一个充满数据的卡片。所以它填充了来自数据库的正确数据，但仍然产生这个错误。

编辑2

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

更新

同样，在其中找不到任何逻辑->我使用以下命令对其进行了初始化：

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

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

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

4

2 回答 2

0

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

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

于 2016-11-02T08:25:53.740 回答
0

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

于 2016-11-02T08:26:47.120 回答