Javascript 单击“角度2”切换视图

我有一张引导卡，里面有三种不同的内容视图。单击每个数据集的链接后，我将控制每个独立数据集的视图。问题是，当我单击一个链接时，它不会隐藏上一个链接。我在使用typescript获取正确的函数时遇到问题

在my component.ts文件中

  public showEquifax:boolean = true;
  public showExperian:boolean = false;
  public showTransunion:boolean = false;

然后在我的html文件中

 <div class="btn-group" role="group" aria-label="Credit Report Navigation">
                    <button (click)="showEquifax = !showEquifax" type="button" class="btn btn-secondary">Equifax Report </button>
                    <button (click)="showExperian = !showExperian" type="button" class="btn btn-secondary">Experian Report </button>
                    <button (click)="showTransunion = !showTransunion" type="button" class="btn btn-secondary">Transunion Report </button>
                </div>

但对于左侧赋值表达式，我得到了一个错误

---

当当前函数设置为true时，如何编写这些布尔函数以将其他布尔函数更改为false？

您想要的是：当一个布尔函数显示时，其他两个布尔函数隐藏，对吗？把你的逻辑改成这样怎么样：

// On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';

<button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...

<div *ngIf="shown === 'EQUIFAX'">
    content here
</div>

<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>

然后，按钮的作用如下：

// On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';

<button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...

<div *ngIf="shown === 'EQUIFAX'">
    content here
</div>

<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>

---

这是个伟大的人。谢谢你这么简单。你介意告诉我如何在我正在使用的按钮上做类似的事情吗？routerLinkActive=“active”仅适用于我假设的路由器链接。基本上如何在页面加载时将按钮显示为活动的？只需有条件地添加一个CSS类，如：
，其中
activeClass
是一个CSS类，具有活动按钮的样式，如
.activeClass{background:red；}
。非常感谢您的帮助！