单击图像时显示文本

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