TS的模板变量

Question

看，我有一个页面可以根据阵列“计划”中的项目数动态生成卡片，这些项目是：
TS：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { environment } from './../../../environments/environment';


@Component({
  selector: 'pagina-plano',
  templateUrl: './pagina-plano.component.html',
  styleUrls: ['./pagina-plano.component.sass']
})
export class PaginaPlanoComponent implements OnInit {

  id = '';

  myPlans: [
    {
      nome: 'Mestre',
      descricao: 'O que desejar meu rei',
      valor: 300 ,
      numeroParcelas: 6
    },
    {
      nome: 'Diamante',
      descricao: 'Musculação + 4 Modalidade',
      valor: 280,
      numeroParcelas: 5
    },
    {
      nome: 'Platina',
      descricao: 'Musculação + 3 Modalidade',
      valor: 260,
      numeroParcelas: 4
    },
    {
      nome: 'Ouro',
      descricao: 'Musculação + 2 Modalidade',
      valor: 240,
      numeroParcelas: 3
    },
    {
      nome: 'Prata',
      descricao: 'Musculação + 1 Modalidade',
      valor: 220,
      numeroParcelas: 2
    },
    {
      nome: 'Bronze',
      descricao: 'Musculação',
      valor: 200,
      numeroParcelas: 1
    }
  ],

  constructor(
    private activatedRoute: ActivatedRoute
  ) {
    this.id = this.activatedRoute.snapshot.params['id']
  }

但是我想要，例如，当我单击计划“ Mestre”的卡片时，我想要打开计划“ Mestre”的页面，因为我使用了app.routing.module中的ID：

const routes = [
  {
    path: 'home',                 // Page where all the cards are
    component: HomePageComponent  //
  },
  {
    path: 'plano/:id',                //Page of the Specific Plan that the user clicked
    component: PaginaPlanoComponent,  //
  },
  {
    path : '',
    redirectTo:"home",
    pathMatch: 'full'
  }
];

在我的HTML中，我给每张卡都加上<div class="card" *ngFor="let plans of myPlans; let index = index">的索引

那么我如何告诉另一个页面它必须呈现带有索引1的计划页面呢？希望我的问题不会引起混淆。请帮助我。