Question

我试图单击有关某个元素的详细信息，我只希望该特定详细信息的详细信息显示和隐藏其他元素详细信息。

“这是Angular7。我尝试使用* ngIf，但失败了。我正在使用父子组件通信技术。

父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() {
  }

}

当我单击DETAILS按钮时，我希望只显示Element1，但是我得到了所有Element1，Element2和Element3的显示。

Answer 1

| makeresults | eval _raw="{\"application_name\":\"abc\",\"type\":\"imp\"},\"box\":\"dev\",\"message_text\":\"{\\\"data\\\":{\\\"error\\\":\"invalid\",\\\"status\\\":\"200\"}}"
| rex field=_raw "\"message_text\":\"(?<data>.*)$" | rex mode=sed field=data "s/\\\\\"/\"/g" | eval _raw=data | kv | stats count by "data.status"

Answer 2

@ 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;
}

在函数中其他元素应该为false，因为您希望一次显示单个元素

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

如何在Angular 7中显示1个元素并隐藏多个元素

2 个答案: