[英]Hide / show with *ngIf Angular2
我有兩個要根據*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;
}
}
為什么我的功能不能正常工作?
我實際上改變了你的代碼。 將第一個 div 的visability
設為 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>
這是一種解決方案。
我通過刪除第二個元素的*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'
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.