Я хочу сделать аккордеон, как исправить эту подпункт таблицы таблицы? - PullRequest
Новая
       5

Я хочу сделать аккордеон, как исправить эту подпункт таблицы таблицы?

0 голосов
/ 27 февраля 2019

Я недавно пытался использовать angular, и я хочу добавить аккордеон в таблицу, и моя подпункт таблицы появляется в каждой строке ... как это исправить?

Код машинописи 

constructor(
    ...
    protected labarugiReport: ReportLabarugiService
) { }

ngOnInit(){}
...

isActive(id) {
   return this.selected === id;
}

async getSub(id:any){
     this.selected = (this.selected === id ? null : id);
     let dateEnd = new Date(this.dateEnd.value);
     let dateStart = new Date(this.date.value);
     this.itemSoldSub3 = await this.labarugiReport.getReoportListSoldItemByCategoryAll(this.user.principle.id, id, this.getDate(dateStart), this.getDate(dateEnd));
}

Мой код Scss 

.table-container {
    .activetab {
        display: block !important;
    }

}

HTML-код, который я изменил из другого вопроса 

<tbody>
   <tr *ngFor="let data of itemSoldSub2;let i=index" [ngClass]="{activetab: isActive(data.categoryId)}">
         <div (click)="getSub(data.categoryId);">

               <div *ngIf = "data.categoryName">
                        <td style="border-bottom: none;">{{data.categoryName}}</td>
                </div>
                <div *ngIf = "!data.categoryName">
                          <td style="border-bottom: none;">Uncategorized</td>
                        </div>
                      <td style="border-bottom: none;">{{data.sumPrice}}</td>
               </div>
                <!-- </tr> -->
               <table>
                  <tbody [ngClass]="{activetab: isActive(data.categoryId)}">
                      <tr *ngFor="let sub of itemSoldSub3">
                          <td>{{sub.itemName}}</td>
                          <td>{{sub.sumTotalPrice}}</td>
                      </tr>
                  </tbody>
               </table>
   </tr>
</tbody>

1 Ответ

0 голосов
/ 27 февраля 2019

Добавьте условие в этой строке 

 <div (click)="getSub(data.categoryId);" *ngIf="data.showAccordion">

Внутри метода getSub (), сделайте data.showAccordion, когда пользователь нажимает, true.Вам нужно будет добавить свойство showAccordion в ваши данные json.Сейчас это не работает, потому что я не могу найти условия, чтобы спрятать весь аккордеон.Если это не поможет, я бы порекомендовал вам предоставить простую диаграмму, показывающую, чего вы пытаетесь достичь.

...