如何折叠为手风琴json对象deatails有角度的* ngFor指令？ [英] How to collapse as accordion json object deatails that have *ngFor directive in angular?

问题描述

我希望折叠并像手风琴我的json对象细节一样扩展。我已经用于循环和* ngFor指令。

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.

推荐答案

@Ruwan，这个想法（没有.ts）

@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>

看到我做的唯一一个是由t-isCollapsed替换iscollapsed。什么是t.collapsed？嗯是你的对象response.articles的属性。

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.

认为response.articles就像

Think that response.articles is like

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

我们添加一个新的属性isCollapsed来制作response.articles变为

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?

不修改你的.ts工作，因为你有一个对象数组，你可以直接添加一个属性（在我们制作的.html中）。但您更喜欢在.ts中添加此属性。在这种情况下，你唯一需要的是

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

这篇关于如何折叠为手风琴json对象deatails有角度的* ngFor指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！