擴展當前div時保持其他div的狀態

目前，我有這個小例子，如果我點擊圖像圖標，它會顯示問題的答案，當我再次單擊圖像時，它隱藏答案。擴展當前div時保持其他div的狀態

因此，鑑於這種情況下，我點擊第一個問題的圖像圖標，它顯示了答案。然後，如果我去下一個div並點擊圖像圖標，它應該顯示第二個div的答案並保持第一個div的狀態。也就是說，它不應該關閉第一個div。

目前，在我的示例中，當第二個div打開時，它關閉第一個div。如何在當前div擴展時保持頁面上其他div的狀態？

這裏的plunker：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"; 
    } 

}

來源

2017-01-24 Euridice01

你可能想看看這個plunker：HTTPS：/ /plnkr.co/edit/oVoPIA0ZbMMauth812Ls?p=preview –

您可以顯示/不顯示狀態存儲在模板中的各個部分變量。

<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爲好。

來源

2017-01-24 20:18:12 toskv

好的，所以這個效果很好，但圖像的狀態不會改變！我有兩個圖像。當視圖加載時會顯示一個，然後當用戶點擊它並顯示答案時，應該設置一個新圖像。如果用戶再次點擊它，舊圖像會再次出現。上面的行爲打破了這個流程。 – Euridice01

這非常方便，或者也可以包含所有問題的數組。請更新部件的新結構，以便每個人都能理解。 –

你的問題就在這裏：

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

您有所有div只有一個showanswer，你需要一個標誌/布爾值，每格

來源

2017-01-24 20:20:41 Avi

擴展當前div時保持其他div的狀態

回答

相關問題