typescript Angular 2 在点击时切换视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40491447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 Toggle Views On Click
提问by wuno
I have a bootstrap card which has three different content views inside it. I am controlling the view of each of the separate data sets onclick of a link for each one. The problem is when I click a link it does not hide the previous one. I am having trouble getting the function right with typescript.
我有一个引导卡，里面有三个不同的内容视图。我正在控制每个单独数据集的视图，点击每个数据集的链接。问题是当我单击一个链接时，它不会隐藏上一个链接。我在使用打字稿正确获取功能时遇到了麻烦。
in my component.ts file
在我的 component.ts 文件中
public showEquifax:boolean = true;
public showExperian:boolean = false;
public showTransunion:boolean = false;
Then in my html file
然后在我的 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>
Based on this logic how can I change the booleanvalue of the functions to falsewhen the link clicked value gets changed to true
基于此逻辑，如何boolean将函数的false值更改为链接单击的值更改为true
I tried to do something like this,
我试图做这样的事情，
public showEquifax() {
showExperian() = false;
showTransunion() = false;
return true;
}
But I get an error for left-hand side assignment expression.
但是我收到左侧赋值表达式的错误。
How can I write each of these boolean functions to change the others to false when the current function is set to true?
当当前函数设置为 true 时，如何编写这些布尔函数中的每一个以将其他函数更改为 false？
回答by Rodrigo
What you want is: when one is shown, the other two are hidden, right? What about change your logic to something like this:
你想要的是：当一个显示时，另外两个隐藏，对吧？把你的逻辑改成这样怎么样：
// On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';
Then, the buttons would act like this:
然后，按钮将如下所示：
<button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...
Then you could show your components like this:
然后你可以像这样显示你的组件：
<div *ngIf="shown === 'EQUIFAX'">
content here
</div>
<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>
