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

【问题标题】：getting error when reloading page in Angular在 Angular 中重新加载页面时出现错误
【发布时间】：2020-04-11 15:29:44
【问题描述】：

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

【问题讨论】：

getDecks() 返回什么？
getDecks() { if (this.decks) { return this.decks.slice(); } }
当你重新加载时this.decks变成undefined。
为什么我重新加载页面时 this.deck 未定义？我怎样才能等到 this.decks 被定义后再显示甲板细节组件？
如果您可以在堆栈闪电战中重现此问题，则很容易回答这个问题。

标签： javascript angular routing

【解决方案1】：

在您的 html 文件中添加一个条件是否可用。

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

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

【讨论】：

为什么重新加载页面不加载卡片组？