How to collapse as accordion json object deatails that have *ngFor directive in angular?

问题

I want collapse and expand like accordion my json object details.I already used for loop and *ngFor directive.

 toggleCollapse(){
    this.isCollapsed=!this.isCollapsed;
  }

 <div class='wrapper' *ngFor="let t of response.articles">

        <div class='img-wrapper' *ngIf="isCollapsed">
            <img src='{{t.imgUrl}}' />
        </div>
        <div class='text-wrapper'>
            <h2>{{t.title}}</h2>
            <h5>{{t.description}}</h5>
            <div *ngIf="!isCollapsed ">
                <h5>{{t.content}}</h5>
            </div>
            <button *ngIf="isCollapsed" type="button" (click)="toggleCollapse()" class="btn btn-danger">Read more</button>
            <button *ngIf="!isCollapsed" (click)="toggleCollapse()" class="btn btn-danger">Read less</button>
        </div>

I write this code.When I click "Read More" button all the objects that I have expanding. I should need only expand clicked object only.how can I do this.? thank you.

回答1:

@Ruwan, the idea (no .ts)

 <div class='wrapper' *ngFor="let t of response.articles">
        <!--use t.isCollased, not only isCollapsed -->
        <div class='img-wrapper' *ngIf="t.isCollapsed">
            <img src='{{t.imgUrl}}' />
        </div>
        <div class='text-wrapper'>
            <h2>{{t.title}}</h2>
            <h5>{{t.description}}</h5>
            <div *ngIf="!t.isCollapsed ">
                <h5>{{t.content}}</h5>
            </div>
            <--in buttons we change directy the value of t.iscollapsed-->
            <button *ngIf="isCollapsed" type="button" (click)="t.isCollapsed=false" class="btn btn-danger">Read more</button>
            <button *ngIf="!isCollapsed" (click)="t.isCollapsed=true" class="btn btn-danger">Read less</button>
        </div>

See that the only I made is replace iscollapsed by t-isCollapsed. What is "t.collapsed"?. Well is a property of your objects response.articles.

Think that response.articles is like

[
  {imgUrl:"",title:"",description:"",content:""},  
  {imgUrl:"",title:"",description:"",content:""},
  ...
]

We add a new propertie "isCollapsed" to make the response.articles becomes

[
  {imgUrl:"",title:"",description:"",content:"",isCollapsed:true},  
  {imgUrl:"",title:"",description:"",content:"",isCollapsed:false},
  ...
]

How we add this "extra" property?

Without modify your .ts work because, as you have an array of object you can add a property directy (in .html as we've made). But you would prefer add this property in .ts. In that case, the only thing you need is

//I supouse you have some like
   this.httpClient.get(...).subscribe(response=>{this.response=response})
//replace the line before to transform the response using "map" and spread operator
   this.httpClient.get(...).subscribe(response=>{
        this.response={
           ...response, //all properties of response
                        //but articles we add a property isCollapsed
           articles:response.articles.map(a=>{
               ...a,
               isCollapsed:true
           })
   })

来源：https://stackoverflow.com/questions/52406660/how-to-collapse-as-accordion-json-object-deatails-that-have-ngfor-directive-in

标签

javascript

html

json

angular

ngfor