javascript - Angular 2 单击时切换 View

Question

我有一张引导卡，里面有三个不同的内容 View 。我通过单击每个数据集的链接来控制每个单独数据集的 View 。问题是当我单击一个链接时，它不会隐藏前一个链接。我在使用 typescript 获得正确的功能时遇到困难。

在我的 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 时，如何将函数的 boolean 值更改为 false

我尝试做这样的事情，

public showEquifax() {
    showExperian() = false;
    showTransunion() = false;
    return true;
}

但是我收到左侧赋值表达式的错误。

当当前函数设置为 true 时，如何编写这些 bool 函数中的每一个以将其他函数更改为 false？

Answer 1

你想要的是:当一个显示时，另外两个隐藏，对吧？将您的逻辑更改为这样怎么样:

// 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>