Question

我已经实现了你的angular2-collapsible，它适用于要求（onclick of row，以折叠方式显示细节）。

然而，我有一个特定的事情，我试图让它工作。我有一行扩展，其中包含行中的更多详细信息（行中的任何位置）。现在，此行中有一个下拉列。每当我点击此下拉菜单时，从下拉列表中选择一些选项，整个行都会被点击，整行都会展开，而不是只有这一列的下拉展开。

如何从这一列中删除此展开属性，该列具有下拉代码（选择下拉列表）。

任何指针都非常感激。

这是我使用的模块。 https://dmitriiser.github.io/angular2-collapsible-example/

     <collapsible-table-row [detail]="detail">
          <td>test</td>
          <td>test1, test2</td>
          <td>hjjg</td>
          <td>abc</td>
          <td>tto</td>
          <td>test</td>
          <td>raw</td>
          <td>data</td>
          <td>date</td>
          <td (click)="tdclick()">
            <div>
              <select (click)="onClickofdd($event)" [(ngModel)]="nName" 
               name="nName" style="display:block;">
                <option value="">Option1</option>
                <option [ngValue]="postID">Optioin2</option>
              </select>
            </div>
          </td>
        </collapsible-table-row>

.ts文件代码如下：

    tdclick($event){
    $event.stopPropagation();
  }

  onClickofdd(event){
    console.log(event);
  }

能够触发点击，但由于某种原因，下拉列表会自动关闭。我可以点击下拉菜单，但它不会让我选择一个选项。

更新：这里是我在HTML中的代码。根据angular2-collapsible的最新版本，如果不是TR / TD，则不应触发咔嗒声。但是现在，当我点击选择下拉菜单时，下拉菜单会打开，就像眨眼一样然后关闭。

   <div class="sampleclass">
    <h5 style="color: #008080;font-weight:bold">Table Data!</h5>
    <collapsible-table [type]="'accordion'" bordered="true" striped="true">
      <thead>
        <collapsible-table-row>
          <th>Test Name</th>
          <th>Test MTest </th>
          <th>Test </th>
          <th>Test </th>
          <th>Test </th>
        </collapsible-table-row>
      </thead>

      <tbody *ngFor="let tad of datatable">
        <collapsible-table-row [detail]="detail">
          <td>{{tad .test}}</td>
          <td>{{tad .firstName}}</td>
          <td>{{tad .testarea}}</td>
          <td>{{tad .testplay}}</td>
          <td>
            <div>
              <select>
                <option value="">please select an option</option>
                <option *ngFor="let kat of Types">{{kat.dropdownoption}}
    </option>
              </select>
            </div>
          </td>
        </collapsible-table-row>
        <collapsible-table-row-detail #detail centered="true">
          <div class="container" style="margin-bottom:25px;margin-left: 
    10%;width: 40%;">
            <p style="font-weight:bold;margin-top:25px;">Details: 
    {{tad.name}}</p>
            <hr style="margin-top:0px;margin-bottom:0px;">
            <div class="right">
              {{tad.test}} <br>
             ////// expanded view
            </div>
          </div>
        </collapsible-table-row-detail>
      </tbody>
    </collapsible-table>
  </div>

Answer 1

尝试手动捕获select元素上的click事件，并停止使用event.stopPropagation冒泡的事件：

<select (click)=clickHandler($event)></select>

...

clickHandler(event) {
    event.stopPropagation();
}

这应该使事件不会触发父元素，包括row。

如果你真的不想禁用行点击，你可以这样做：

<row (click)="shouldRowBeClickableBoolean && clickHandlerFunction()"></row>

删除可折叠行

1 个答案: