как сделать весь ряд кликабельным угловым 4 - PullRequest
Новая
       36

как сделать весь ряд кликабельным угловым 4

0 голосов
/ 03 апреля 2019

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

html-код моего родителя 

  <app-custom-accordion [closeOthers]="true">
  <ngb-panel *ngFor="let panel of panels" id="{{panel.Id}}">
  <ng-template ngbPanelTitle>
  <span class="panel-title">{{panel.Name}}<strong>{{' -' + '(' + panel.Tests.length + ')'}} </strong></span>
    <div class="action-items">
      <span class="material-icons fav" [class.favorited]="panel.Favorite" (click)="onFavoriteClick(panel)"></span>
      <span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(panel.Code), 'next-day-2x': isNextDay(panel.Code)}"></span>
      <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)"
          (ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
        <span class="custom-control-indicator"></span>
      </label>
    </div>
  </ng-template>
</ngb-panel>

код моего приложения-аккордеона 

<div class="card">
<ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
  [class.active]="isOpen(panel.id)">
  <a href (click)="!!toggle(panel.id)" [attr.tabindex]="(panel.disabled ? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
    [attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)" [attr.aria-disabled]="panel.disabled">{{panel.title}}</a>
  <ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
  <!-- expansion arrows -->
  <div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria-expanded]="isOpen(panel.id)">
    <span class="material-icons expand"></span>
  </div>

</div>
<div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
  <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
</div>

Я хочу, когда я нажимаю 

<span class="panel-title">{{panel.Name}}<strong>{{' -' + '(' + panel.Tests.length + ')'}} </strong></span>

строка должна быть открыта

это моя панель enter image description here

Также хочу сделать часть заголовка панели жирным шрифтом ... Как я могу это сделать? Любая помощь, спасибо.

1 Ответ

0 голосов
/ 03 апреля 2019

следующая демонстрация stackblitz может помочь решить следующие вопросы из вашего вопроса:

  1. массив, который отображается в компонентах
  2. вся строка активнаи открывает содержимое под ним
  3. ( из ваших комментариев ). Создайте стилевое оформление ngbPanel: отметьте <ng-template ngbPanelTitle> в HTML-коде ниже

при чтении массива из компонента ... под 2 фиксированными панелями у меня есть 5 панелей, которые выбираются из массива в файле ts компонента: 

<ngb-panel id="toggle-2" >
    <ng-template ngbPanelTitle>
      you <span style="color:red">can </span> <i>fetch this</i> like <u>you</u> <strong> want </strong> 
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
<ngb-panel [title]="num" *ngFor="let num of numbers">
    <ng-template ngbPanelContent>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
        non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
        put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
        occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore
        sustainable VHS.
    </ng-template>
</ngb-panel>

, чтобы сделатьвся строка кликабельна , добавлено это css: 

  ::ng-deep .btn-link { 
    width: 100%;
    padding: .75rem 1.25rem;
    text-align: left;
  }

  ::ng-deep .card-header {
    padding: 0
  }
...