現在のdivを展開するときに他のdivの状態を保つ

Question

現在、私は画像アイコンをクリックすると質問への回答を表示し、画像を再度クリックすると答えが隠れる小さな例があります。

このシナリオでは、最初の質問の画像アイコンをクリックすると、回答が表示されます。次に、次のdivに移動して画像アイコンをクリックすると、2番目のdivの答えが表示され、最初のdivの状態が保持されます。つまり、最初のdivを閉じるべきではありません。

現在、私の例では、2番目の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

あなたは、テンプレート内の各一部変数で上映/ない示す状態を保存することができます

はここplunkerです。

<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とコピーplunkを作りました。

イメージでは、新しいプロパティを使用して、追加するイメージを決定できます。

部分の代わりに、getimageメソッドに変数idを渡すことができます。

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

そして、（あなたがいずれかを持っている場合、または他の特性）あなたが表示されるはずですどの画像かを決定するために.showanswerプロパティを使用することができますのgetImage方法で

。同様

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

あなたはすべてのdivのための唯一のshowanswer、 あなたはあなたがこのplunkerをチェックアウトすることができますすべてのdivの