在 Angular 中重新加载页面时出现错误

Question

我有一个卡组列表，当我单击卡组时，会加载正确的卡组详细信息组件，显示所选卡组的详细信息，并且 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 { }

Answer 1

在您的 html 文件中添加一个条件，如果甲板可用或不可用。

<div class="container" *ngIf="deck">

因为这是在页面加载时未定义