Как свернуть как объект аккордеона json, имеющий директиву * ngFor в угловых? - PullRequest
Новая
       9

Как свернуть как объект аккордеона json, имеющий директиву * ngFor в угловых?

0 голосов
/ 19 сентября 2018

Я хочу свернуть и развернуть как аккордеон мои детали объекта json. Я уже использовал для цикла и директивы * ngFor. 

 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>

enter image description here

Я пишу этот код. Когда я нажимаю кнопку «Подробнее», все объекты, которые у меня раскрываются.Мне нужно только развернуть только выбранный объект. Как я могу это сделать?спасибо.

1 Ответ

0 голосов
/ 20 сентября 2018

@ Ruwan, идея (№ .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>

Смотрите, единственное, что я сделал, это замена iscollapsed на t-isCollapsed.Что такое "t.collapsed"?Ну это свойство ваших объектов response.articles.

Подумайте, что response.articles похож на 

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

Мы добавляем новое свойство isCollapsed, чтобы response.articles становится 

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

Как мы добавляем это«дополнительное» свойство?

Без изменения вашей работы .ts, поскольку, поскольку у вас есть массив объектов, вы можете добавить свойство напрямую (в .html, как мы сделали).Но вы бы предпочли добавить это свойство в .ts.В этом случае единственное, что вам нужно, это 

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