Как показать 1 элемент и скрыть несколько элементов в Angular 7

Question

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

«Это Angular 7. Я пытался использовать *Если и не получилось.Я использую технику связи родительского и дочернего компонентов.

Родительский HTML

            <h4>2 Days Bangalore Mysore</h4>
          </div>
          <div class="ft-foot">
           <h4 class="ft-title text-upper"><a routerLink="/details"
            (click)="detailsbm2d()" class="btn btn-primary">DETAILS</a></h4>
          </div>


            <h4>2 Days Kodaikanal</h4><br>
          </div>
          <div class="ft-foot">
            <h4 class="ft-title text-upper"><a routerLink="/details" 
              (click)="detailskod2d()" class="btn btn-primary">DETAILS</a></h4>
          </div>


            <h4>2 Days Ooty</h4><br>
          </div>
          <div class="ft-foot">
            <h4 class="ft-title text-upper"><a routerLink="/details"
              (click)="detailsoo2d()" class="btn btn-primary">DETAILS</a></h4>
          </div>

Родительский компонент

show: boolean= true;
show1:any = true;
show2: boolean = true;
  detailsbm2d() {
    this.show = !this.show;
  }
detailskod2d() {
    this.show1 = !this.show1;
  }
}
detailsoo2d() {
    this.show2 = !this.show2;
}
ngOnInit() {
  }

}

Дочерний HTML

<div class="container">
        <div class="row">
          <section class="col-sm-6">
            <h1 class="text-upper">TOUR PLAN</h1>
          </section>
        </div>
      </div>

<div class="container" *ngIf="!show">
       <div id="page" class="col-md-8">
        <P> Element1 </p>
        </div>
</div>
<div class="container" *ngIf="!show1">
       <div id="page" class="col-md-8">
        <P> Element2 </p>
        </div>
</div>
<div class="main-contents" *ngIf="!show2">
       <div id="page" class="col-md-8">
        <P> Element3 </p>
        </div>
</div>

Дочернийкомпонент

export class  {


@Input() show1: boolean;
@Input() show2: boolean;
@Input() public text: string;

  constructor() { }

  ngOnInit() {
  }

}

Я ожидаю, что только элемент 1 будет отображаться при нажатии кнопки ДЕТАЛИ, но я получаю, что все элементы 1, элемент 2 и элемент 3 отображаются.

Answer 1

исправление ответа @ muzzu47

Родительский компонент

show: boolean= true; //Default True for initially show first content
show1:any = false ;
show2: boolean = false ;
detailsbm2d() {
  this.show = !this.show; 
  this.show2 = false;
  this.show1 = false;
}
detailskod2d() {
  this.show = false;
  this.show2 = false;
  this.show1 = !this.show1;
}
detailsoo2d() {
  this.show = false;
  this.show1 = false;
  this.show2 = !this.show2;
}

В функции другой элемент должен быть ложным, поскольку вы хотите отображать одновременно один элемент

 convert all *ngIf = show  // (i.e., remove "!" from all *ngIf's)

Answer 2

    show: boolean= false ;
    show1:any = false ;
    show2: boolean = false ;

    // making show; show1; show2 initially to false hides it. when you click the DETAILS
     // button the click event shows it.


and convert all *ngIf = show  // (i.e., remove "!" from all *ngIf's)