Angular 2 Toggle Views on Click

Question

У меня есть загрузочная карта, в которой есть три разных вида контента. Я контролирую представление каждого из отдельных наборов данных onclick ссылки для каждого из них. Проблема в том, что когда я нажимаю ссылку, она не скрывает предыдущую. У меня возникли проблемы с правильной работой с машинописным текстом.

в моем 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; 
} 

Но я получаю сообщение об ошибке для выражения с левой стороны.

Как написать каждую из этих логических функций, чтобы изменить остальные на false, если для текущей функции установлено значение true?

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>