[英]getting error when reloading page in Angular
我有一個卡組列表,當我單擊卡組時,會加載正確的卡組詳細信息組件,顯示所選卡組的詳細信息,並且 Url 變為卡組/id/卡組名稱。 但是,當我重新加載頁面或嘗試復制特定牌組的 url 時,我會收到此錯誤:
無法讀取未定義的屬性“deckName”
我想我在路由中做錯了什么,這是甲板細節組件
import { Card } from "./../../card/card.model";
import { Deck } from "./../../deck/deck.model";
import { Component, OnInit, Input } from "@angular/core";
import { DeckService } from "src/app/deck/deck.service";
import { ActivatedRoute, Params, Router } from "@angular/router";
import { Subscription } from "rxjs";
@Component({
selector: "app-deck-details",
templateUrl: "./deck-details.component.html",
styleUrls: ["./deck-details.component.scss"],
})
export class DeckDetailsComponent implements OnInit {
//@Input() deck: Deck;
paramsSubscription: Subscription;
id: number;
decks: Deck[];
deck: Deck;
constructor(private deckService: DeckService, private route: ActivatedRoute) {
}
ngOnInit() {
this.id = this.route.snapshot.params["id"];
this.paramsSubscription = this.route.params.subscribe((params: Params) => {
this.id = params["id"];
this.decks = this.deckService.getDecks();
this.deck = this.decks.find (
deck => deck.id === this.id
);
});
}
ngOnDestroy() { this.paramsSubscription.unsubscribe(); }
}
和 html
<div class="container">
<div class="row">
<div class="deck-details " style="border:solid black">
<h1>{{ deck.deckName }} : {{ deck.deckClass }}</h1>
<div *ngFor="let card of deck.deckCards">
<span
[ngClass]="{
common: card.rarity == 'common',
rare: card.rarity == 'rare',
epic: card.rarity == 'epic',
legendary: card.rarity == 'legendary'
}"
>
{{ card.name }}
</span>
<h4 class="inlineh4">: {{ card.manaCost }} mana</h4>
<img [src]="card.imagePath" alt="" style="height: 20px;" />
</div>
</div>
</div>
</div>
這是應用程序路由模塊
const appRoutes: Routes = [
{ path: '', component: CardListComponent },
{ path: 'decks', component: DeckListComponent, children: [
{ path: ':id/:deckName', component: DeckDetailsComponent }
] },
{ path: 'createDeck', component: CreateDeckComponent },
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在您的 html 文件中添加一個條件,如果甲板可用或不可用。
<div class="container" *ngIf="deck">
因為這是在頁面加載時未定義
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.