我有两个要根据*ngIf
条件值隐藏和显示的元素。
默认情况下,我的wrap
块是可见的,当我单击其中一个块时,divs
该wrap
块应该消失,并且只有选定的div's
内容应该显示在我的span
元素中。然后,当我单击我的span
元素时,它应该会消失,并且wrap
块应该以其所有默认内容再次出现。
为了实现这一点,我对这两个元素都使用*ngIf
了 value 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;
}
}
为什么我的功能无法正常工作?