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

单击图像时显示文本

1 个答案: