Расширяемая строка таблицы для чтения текста в Angular

Question

Привет, у меня есть проект Angular8, и есть таблица с одним из полей, в которой много текста (иногда более сотни текстов). Я хотел бы получить код javascript или любой уже созданный компонент js, который может помочь развернуть или свернуть строку при щелчке по знаку «Читать далее» в конце текста (при начальной загрузке таблицы отображается только часть текста) ). В развернутом виде он должен иметь знак «меньше читаемого» в конце, который свернет строку при нажатии. Я искал в Интернете, но не помогал.

    <h1>
    Key Fields
</h1>

<table class="table table-striped table-bordered table-hover table-lg">
    <thead>
        <tr class="table-primary">
            <th>Name</th>
            <th>Description</th>
            <th>Format</th>
            <th>Format Notes</th>
            <th>Xml Tag</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let keyfield of keyfields">
            <td>{{keyfield.keyName | uppercase }}</td>
            <td>{{keyfield.description}}</td>
            <td>{{keyfield.format}}</td>
            <td>{{keyfield.formatNotes}}</td>
            <td>{{keyfield.xmL_Tag}}</td>
        </tr>
    </tbody>
</table>

<div class="d-flex justify-content-between p-2">
    <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" (pageChange)="loadPage($event)">
    </ngb-pagination>
  </div>

Answer 1

Я бы предложил написать свой. Мой сайт использует несколько версий этого для разных типов экранов, так что вот пара решений.

Logi c

Независимо от того, что вам сначала понадобится переключатель, чтобы определить, какие разделы расширены.

Expand Any

Дайте вашему keyfields объекту expanded логическое значение. Таким образом, каждый объект ngFor содержит свой собственный переключатель «is open».

Expan only One

Создайте новую переменную publi c в своем компоненте, которая имеет index расширенного раздела.

(для этого нужно использовать синтаксис индекса ngFor):

<tr *ngFor="let keyfield of keyfields; index as i">

HTML

Angular имеет много решений для чего Вы хотите, и это действительно предпочтение. Мой сайт использует angular анимации, и он также использует стандарт s css для мобильной версии (до вас).

Для обоих решение одно и то же. Пишите стили для скрытия вашего контента; используйте компонент logi c, чтобы установить текущее состояние (анимированное или css).

Анимации

Здесь у таблицы есть автомат c высота.

@Component({
...
    animations: [
        trigger('keyfieldExpanded', [
            state('collapsed', style({height: '0px', minHeight: '0'})),
            state('expanded', style({height: '*'})),
            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ],
})

а затем что-то подобное для вашего html:

<td class="element-detail" [@keyfieldExpanded]="keyfield.expanded ? 'expanded' : 'collapsed'">
expanded content here
</td>

CSS

Это более простое решение. Если вы не хотите анимацию, просто используйте скрытый атрибут, ngclass или ngstyle.

Все они могут использовать один и тот же переключатель: keyfields.expanded или i == expanded, если вы go для Расширить только один вариант.

Подробнее

С моим предложением это на самом деле довольно просто.

(взято из кода выше):

<tr *ngFor="let keyfield of keyfields">
    <td>{{keyfield.keyName | uppercase }}</td>
    <td>{{keyfield.description}}</td>
    <td>{{keyfield.format}}</td>
    <td>{{keyfield.formatNotes}}</td>
    <td>{{keyfield.xmL_Tag}}</td>
    <td [hidden]="keyfield.expanded == true"><button (click)="keyfield.expanded = true">read more</button></td>
    <td [@detailExpand]="keyfield.expanded ? 'expanded' : 'collapsed'">
        <p>{{keyfield.expandedContent}}</p>
        <button (click)="keyfield.expanded = false">read less</button>
    </td>
</tr>