使用 *ngIf Angular2 隐藏/显示答案

【问题标题】：Hide / show with *ngIf Angular2使用 *ngIf Angular2 隐藏/显示
【发布时间】：2017-01-20 20:42:19
【问题描述】：

我有两个要根据*ngIf 条件值隐藏和显示的元素。

默认情况下，我的wrap 块是可见的，当我单击其中一个divs 时，此wrap块应该消失，并且只有选定的div's 内容应该显示在我的span 元素中。然后当我点击我的span 元素时，它应该会消失，wrap 块应该会再次出现，并带有其所有默认内容。

为了实现我对两个元素都使用*ngIf 和值visability，期望我的函数以下列方式工作：

wrap - visible;
span - hidden;

wrap - hidden;
span - visible;

这是我的代码：

@Component({
selector: 'my-app',
template: `
<div id="wrap" class="wrap" *ngIf="visability">
<div (click)="clicked($event)">
  <h2>Hello {{name}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{year}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{surname}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{country}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{cartoon}}</h2>
</div>

 <div class="view">
  <span id="span" (click)="showDivs()" *ngIf="visability">{{target}}    </span>
 </div>

 `,
})
export class App {
name:string;
year: string;
surname: string;
country: string;
cartoon: string;
element: any;
target: any;

constructor() {
var wrap = document.getElementById("wrap");
var span = document.getElementById("span");
this.name = 'Angular2'
 this.year = '1989'
  this.surname = 'Connor'
   this.country = 'USA'
    this.cartoon = 'Tom & Jerry'
  }

clicked(event) {
wrap.visability = false;
span.visability = true;
this.target = event.target.innerText;
} 

showDivs(){
span.visability = false;
wrap.visability = true;
}

}

My Plunker

为什么我的函数不能正常工作？

【问题讨论】：

标签： angular event-binding angular-ng-if

【解决方案1】：

我实际上稍微更改了您的代码。将visability 设置为第一个 div 为 true，第二个为 false。更好地把它们分开。然后它只是根据点击切换布尔值，如下所示：

首先将可见性声明为变量，以便您可以使用this 引用它，然后只需切换可见性。

  clicked(event) {
    this.visability = false;
    this.target = event.target.innerText;
  }

和

  showDivs(){
    this.visability = true;
    // span.visability = false; // remove this
    // wrap.visability = true;  // remove this
  }

和相应的html：

<div id="wrap" class="wrap" *ngIf="visability">

和

<span id="span" (click)="showDivs()" *ngIf="!visability">{{target}}</span>

这是一种解决方案。

你的plunker

【讨论】：

【解决方案2】：

我通过删除第二个元素的 *ngIf 解决了这个问题。我刚刚使用 *ngIf="shown" 作为span。

然后在构造函数中我设置了两个

visibility = true

和

shown = true

在函数内部，我将值切换为相反，从而设法实现了我想要的，尽管我不知道这是否是最好的方法。

@Component({
  selector: 'my-app',
  template: `
  <div id="wrap" class="wrap" *ngIf="visibility">
    <div (click)="clicked($event)">
      <h2>Hello {{name}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{year}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{surname}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{country}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{cartoon}}</h2>
    </div>
  </div>

  <div class="view">
    <span id="span" (click)="showDivs()" *ngIf="shown">{{target}}</span>
  </div>

  `,
})
export class App {
  name:string;
  year: string;
  surname: string;
  country: string;
  cartoon: string;
  element: any;
  target: any;

  clicked(event) {
     this.target = event.target.innerText;
     this.visibility = false;
     this.shown = true;
  }

  showDivs(){
     this.shown = false;
     this.visibility = true;
  }

  constructor() {
    this.visibility = true;
    this.shown = true;
    this.name = 'Angular2'
     this.year = '1989'
      this.surname = 'Connor'
       this.country = 'USA'
        this.cartoon = 'Tom & Jerry'
  }



}

Working Plunker

【讨论】：