如何使整行可点击角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>

我的应用程序自定义手风琴代码

<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

以下demo 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
  }