Angular：无法路由

Question

我是Angular的新手。请原谅这个问题是否天真。

这是我的HTML：

<tr *ngFor="let transaction of transactions; let i = index">
        <td>{{transaction.name}}</td>
        <td><a [routerLink]="['/transactions', {name: transaction.name, currentVersion: transaction.currentVersion}]">{{transaction.currentVersion}}</a></td>
        <td>{{transaction.month}}</td>
        <td>{{transaction.status}}</td>
        <td><a>{{transaction.prevVersion}}</a></td>
        <td>{{transaction.subDate}}</td>
        <td>{{transaction.dueDate}}</td>
        <td>{{transaction.lastUpdatedBy}}</td>
        <td>
          <span class="fa fa-check"></span>
          <span class="fa fa-remove"></span>
        </td>
      </tr>

这是我的路由器配置：

{
    path: 'transactions',
    component: TransactionsComponent,
    canActivate: [CanActivateAuthGuardService],
    children: [
      {
        path: '',
        component: ViewTransactionsComponent
      },
      {
        path: ':id',
        component: TransactionDetailsComponent
      },
      {
        path: 'create-transaction',
        component: CreateTransactionComponent
      }
    ]
  }

我尝试使用对象作为路由参数路由到详细信息组件。但它不起作用。

以下是我浏览器导航栏的摘要。

请帮助我。