Свернуть область с циклом данных - PullRequest
Новая
       3

Свернуть область с циклом данных

0 голосов
/ 05 июня 2018

У меня есть SPA (одностраничное приложение), где есть таблица, которая должна раскрывать детали.

Это код: 

<div class="row mt-4" *ngFor="let row of rows">
    <div class="col-12">
        <button class="btn btn-link" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
            <i class="fa" aria-hidden="true"></i>
            Details
        </button>
        <div [ngbCollapse]="isCollapsed">
            {{ row.detail}}
        </div>
    </div>
</div>

Я не могу его развернуть, простодетали столбца, по которому щелкнули

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

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

В разделе HTML компонента, получите индекс вашего цикла ngFor и используйте этот индекс-переменная в привязке к событию и директива ngbCollapse.Чтобы это работало, вам нужен массив логических свойств в вашем файле component.ts.

компонент HTML 

<div *ngFor="let row of rows; let i = index">
    <button type="button" (click)="isCollapsed[i] = !isCollapsed[i]">
        Button Text
    </button>
    <div [ngbCollapse]="isCollapsed[i]">
        .. some content ..
    </div>
</div>

компонент TypeScript 

@Component({
  selector: 'xxx',
  templateUrl: './xxx.component.html',
  styleUrls: [ './xxx.component.css']
})
export class xxx{

  public isCollapsed: boolean[] = [];

}
0 голосов
/ 05 июня 2018

У вас есть единственная переменная isCollapsed, которая управляет развертыванием / свертыванием для каждого деления (так что либо все будет развернуто, либо все будет свернуто).Вы не опубликовали Typescript, но я предполагаю, что он выглядит следующим образом: 

export class MyComponent {

  public isCollapsed: boolean = true;

  public rows: object[] = [
    { detail: 'x' },
    { detail: 'y' }
  ]; 
}

Вам потребуются индивидуальные isCollapsed переменные для отслеживания отдельных div.

Если выиметь контроль над объектами в rows, вы можете добавить его туда: 

public rows: object[] = [
  {
    detail: 'x',
    isCollapsed: true
  },
  {
    detail: 'y',
    isCollapsed: true
  }
];

Затем измените HTML следующим образом: 

<div class="row mt-4" *ngFor="let row of rows">
    <div class="col-12">
        <button class="btn btn-link" (click)="row.isCollapsed = !row.isCollapsed"
          [attr.aria-expanded]="!row.isCollapsed" aria-controls="collapseExample">
            <i class="fa" aria-hidden="true"></i>
            Details
        </button>
        <div [ngbCollapse]="row.isCollapsed">
            {{ row.detail}}
        </div>
    </div>
</div>

Это позволит вам контролировать расширение /рушатся отдельные дивы.Пожалуйста, смотрите этот Plunker для демонстрации

...