Question

我有一张bootstrap卡，里面有三个不同的内容视图。我正在控制每个单独数据集的视图，点击每个链接的链接。问题是，当我点击链接时，它不会隐藏前一个链接。我无法使用打字稿获得正确的功能。

在我的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>

根据此逻辑，当链接点击值更改为boolean时，如何将函数的false值更改为true

我试着这样做，

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

但是我的左侧赋值表达式出错了。

当当前函数设置为true时，如何编写每个布尔函数以将其他函数更改为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>

Angular 2在点击时切换视图

1 个答案: