0

だから私はこの超奇妙なシナリオを持っています...

1 週間前にアプリケーションを完全に正常に動作させたままにし、今日は作業を再開し、ドロップダウンが機能しなくなったことに気付きました...

私は非常に単純なコンポーネントを持っています:

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。

もう一度言及する必要があるように感じます。コードで文字通り何も変更しませんでした。ドロップダウンは完全に機能し、すべての詳細を表示し、1 週間後に再度実行しました。

何か案は？

すべての助けを前もって感謝します。何か不足している場合はお知らせください

編集

console.log(JSON.stringify(this.card)その上にを配置するngOnInitと、カードがデータで満たされていることに注意してください。そのため、DB からの正しいデータで満たされていますが、それでもこのエラーが発生します。

編集2

さらに、HTML 要素を調べるとcard-details、正しい名前を含む正確に 2 つの要素があることがわかります。では、ここで何が問題なのですか? :O

アップデート

繰り返しますが、その中にロジックが見つかりません->次で初期化しました：

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

どうぞ、どんな洞察も私に大いに役立ちます!

4

2 に答える 2

0

リストをループしていcardsます。コードを何も変更していないのに、突然失敗し始めた場合は、何かがデータを変更した可能性があります。データベースを確認しますか? またはどこからカードを読んだか - 彼らはおそらく空のカードを読んでいます.

エラーが発生したと思われる場所からエラーが発生したことを確認してください。見えないコードをデバッグすると、エラーを特定するのに役立ちます。

于 2016-11-02T08:25:53.740 に答える
0

card?.cardName代わりに参照してみてください。コンポーネントが一瞬未定義になる可能性があります。それが機能する場合 (または機能しない場合)、正しい方向に進む可能性がありますか?

于 2016-11-02T08:26:47.120 に答える