Блог

Главная - Вопросы по программированию - (Показать больше/Показать меньше)Только для одного в таблице в угловой

(Показать больше/Показать меньше)Только для одного в таблице в угловой

#html #angular #typescript

Вопрос:

У меня есть таблица, и я хочу использовать «показывать больше/ показывать меньше текста pos.report «. в настоящее время, когда я нажимаю «Показать больше» для одного <td> , он показывает больше для всех <td> в таблице.

.Html

  <tbody>
            <tr *ngFor="let pos of procedureOrderList; let i = index">
              <td>{{pos.investigationName}}</td>
              <td>{{pos.investigationDate | date: 'dd-MM-yyyy'}}</td>
              <td>{{pos.released_DT | date: 'dd-MM-yyyy'}}</td>
              <td> <ng-container *ngIf="pos.report">
                  {{(show) ? pos.report : pos.report | slice:0:50}}             
                 <a *ngIf="pos.report.length > 0;" (click)="show = !show" > ...{{ show ? '[Show less]': '[Show More]' }}</a>
              </ng-container>
              </td>                    
            </tr>
          </tbody>

.ts

show = false;

Комментарии:

1. Поместите свойство ‘show’ в любой класс/интерфейс ‘pos’.

2. вы хотите добавить «показать» в <tr>? @RoddyoftheFrozenPeas

3. @Хамда stackblitz.com/edit/… тебе нужно что-то вроде этого.

4. Нет, я имел в виду вставить его в модель.

Ответ №1:

Рабочая демонстрация по этой ссылке на Stackblitz

В принципе, вам нужно присвоить свойству show значение индекса i, и в соответствии со значением show и i вы можете отображать «показывать больше» или «показывать меньше» только для выбранного элемента td.

 <table>
  <tbody>
    <tr *ngFor="let pos of procedureOrderList; let i = index">
      <td>{{pos.investigationName}}</td>
      <td>{{pos.investigationDate | date: 'dd-MM-yyyy'}}</td>
      <td>{{pos.released_DT | date: 'dd-MM-yyyy'}}</td>
      <td>
        <ng-container *ngIf="pos.report">
          {{(show) ? pos.report : pos.report | slice:0:50}}
             <a *ngIf="pos.report.length > 0;" (click)="((show = i ))"> 
                    ...{{ (( show === i)) ? '[Show less]': '[Show More]' }}</a>
        </ng-container>
      </td>
    </tr>
 </tbody>
</table>

Комментарии:

1. побочным эффектом этого рабочего процесса, который, кстати, решает проблему, является то, что вы можете показывать только одну строку за раз. поэтому, если вы «покажете» строку 1, а затем нажмете «показать» в строке 2, строка 1 перестанет отображаться. это может быть или не быть тем, чего хочет ОП, в вопросе не уточняется.

Ответ №2:

В качестве альтернативы методу ГаурангДхорды вы также можете расширить используемую модель, включив «показать» в качестве свойства.

Поэтому , предполагая, что pos это тип Pos , определил что-то вроде этого:

 interface Pos {
  investigationName: string;
  investigationDate: date;
  release_DT: date;
  report: string;
}

… затем вы можете расширить этот интерфейс (или класс) и предоставить ему свойство «показывать», как это:

 interface ShowablePos extends Pos {
  show: boolean;
}

Тогда хитрость в том, что когда вы получаете свои экземпляры Pos (например, из API), вы используете map вызов для преобразования их в экземпляры ShowablePos:

 posApi.getProcedureOrderList()
  .pipe(map( posList => {
    // each pos is show=false by default
    return posList.map(pos => ({ ...pos, show: false }))
  }))
  .subscribe(...)

Тогда единственное изменение, которое вам нужно внести в свой HTML, — это ссылка на pos.show вместо глобального show .

 <td>{{pos.investigationName}}</td>
<td>{{pos.investigationDate | date: 'dd-MM-yyyy'}}</td>
<td>{{pos.released_DT | date: 'dd-MM-yyyy'}}</td>
<td>
  <ng-container *ngIf="pos.report">
    {{(pos.show) ? pos.report : pos.report | slice:0:50}}
    <a *ngIf="pos.report.length > 0;" (click)="pos.show = !pos.show" > ...{{ pos.show ? '[Show less]': '[Show More]' }}</a>
  </ng-container>
</td>
Метки: