Question

目前，我有一个小例子，如果我点击图像图标，它会显示问题的答案，当我再次点击图像时，它会隐藏答案。

因此，在这种情况下，我点击第一个问题的图像图标，它会显示答案。然后，如果我去下一个div并单击图像图标，它应该显示第二个div的答案并保持第一个div的状态。也就是说，它不应该关闭第一个div。

目前，在我的示例中，当第二个div打开时，它会关闭第一个div。当前div扩展时，如何保持页面上其他div的状态？

这是羽毛球：https://plnkr.co/edit/SzkrltPYPmt4WRijVFuD?p=preview

主要代码：

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let part of parts">
      <h1 class="question">{{part.question}}
      <img (click)="myclick(part.id)" style="float:right;" [src]="getimage(part.id)"
     class="ic_add"/></h1>
      <p *ngIf="showanswer == part.id" class="answer" > {{part.answer}}</p>
      <hr/>
    </div>
  `,
})
export class App {
 public showAnswer = false; 

    parts = [];
    shoanswer = 0;

     imgsrc="https://cdn2.iconfinder.com/data/icons/rounded-functions-1/154/arrow-circle-direction-down-512.png";

    constructor(){
      this.parts = [
          {
            id: 1,  
            question: "Foo?",
            answer: "Bar"
          },
          {
            id: 2,
            question: "ABC?",
            answer: "123"
          }
      ]
    }

    myclick(id) {
      this.showanswer = this.showanswer == id ? 0 : id;
    }

    getimage(id) {
      return this.showanswer == id ? "https://cdn2.iconfinder.com/data/icons/rounded-functions-1/154/arrow-circle-direction-down-512.png" : "images/ic-add.png";
    }

}

Answer 1

您可以将显示/不显示状态存储在模板中相应的部分变量中。

<div *ngFor="let part of parts">
  <h1 class="question">{{part.question}}
      <img (click)="part.showanswer = !part.showanswer" style="float:right;" [src]="getimage(part.id)"
     class="ic_add"/></h1>
  <p *ngIf="part.showanswer" class="answer">{{part.answer}}</p>
  <hr/>
</div>

我用行为here制作了一份副本。

对于图像，您可以使用新属性来确定应添加的图像。

您可以将部分变量而不仅仅是其ID传递给 getimage 方法。

<img (click)="part.showanswer = !part.showanswer" style="float:right;" [src]="getimage(part)"
     class="ic_add"/>

在 getimage 方法中，您可以使用 .showanswer 属性（或其他属性，如果有的话）来确定您应该显示的图像。

    getimage(part) {
      console.log(part.id + " " + part.showanswer);
      let image = part.showanswer ? "https://images.pexels.com/photos/79290/black-and-white-code-programming-tech-79290.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
      : "https://images.pexels.com/photos/256369/pexels-photo-256369.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb";

      return image;

    }

Here也是更新的plunker。

Answer 2

你的问题在于：

myclick(id) {
      this.showanswer = this.showanswer == id ? 0 : id;
    }

你只有一个showanswer所有divs，每个div都需要一个标志/布尔值

扩展当前div

2 个答案: