如何使整行可點擊角4

Question

我有這個數組，我在我的組件中映射。 我希望整行可以點擊並立即打開行，當我點擊行名稱時它不會打開它。

我的父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>

我的app-custom-accordion代碼

<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>

行應該是開放的

這是我的小組

也希望將面板標題的某些部分設為粗體...我該怎么做？ 任何幫助謝謝。

Answer 1

以下演示stackblitz可以幫助您解決以下問題：

1. 一個映射在組件中的數組
2. 整行是可點擊的，並打開其下方的內容
3. （ 來自您的評論 ）使用ngbPanel樣式：檢查下面的HTML代碼中的<ng-template ngbPanelTitle>

從組件讀取數組 ...在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
  }