画像をクリックすると、テキストが表示されます

Question

私の画像がクリックされたときに、私のヘッダの下にテキストを表示しようとしています。 OnClick、それは下にテキストの段落を表示する必要があります。しかし、私は現在の実装で間違っていることに固執しています。

ここに私のhtmlコードは、これまでのところです：

私は疑問を持っており、横に例えばプラス記号です。プラス記号をクリックすると、showAnswerはfalseからtrueになり、次にshowAnswerが表示されますが、ページには既に表示されているすべてのコンテンツが読み込まれます。どうすれば修正できますか？

<h1 class="question"> Foo? 
    <img (click)="showAnswer = !showAnswer" style="float:right;" src="images/ic-add.png" 
    class="ic_add"/></h1> 
<p *ngIf="showAnswer" class="answer" > Bar</p> 
<hr/> 
<h1 class="question" >ABC 
    <img (click)="showAnswer = !showAnswer" style="float:right;" src="images/ic-add.png" class="ic_add"/> 
</h1> 
<p *ngIf="showAnswer" class="answer">123</p> 
<hr/> 

TS：

export class QuestionsComponent { 

    public showAnswer = false; 

    constructor(){     
    } 

} 

Answer 1

あなたのコードに問題はありません。

私はexampleを作成しました。

あなたはそれを確認できます。

はngForによって

サポート、複数の質問を更新しました。

//our root app component 
import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2' 
import {Question} from './question' 

@Component({ 
    selector: 'my-app', 
    bindings: [] 
}) 
@View({ 
    template: ` 
     <question *ng-for="#el of questionArray; #idx = index"></question> 
    `, 
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, Question] 
}) 
export class App { 
    questionArray: Object[] = [1,2]; 
} 




import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2' 

@Component({ 
    selector: 'question', 
    bindings: [] 
}) 
@View({ 
    template: ` 
    <h1 class="question"> Foo? 
     <img (click)="clicked()" style="float:right;" src="images/ic-add.png" 
     class="ic_add"/></h1> 
    <p *ng-if="showAnswer" class="answer"> Bar</p> 
    <hr/> 
    `, 
    directives: [CORE_DIRECTIVES] 
}) 
export class Question { 

    showAnswer: bool = false; 

    clicked() { 
    this.showAnswer = !this.showAnswer; 
    } 
}