javascript - onclick 获取该行数据并向 div 添加滚动条

Question

我是 Angular 新手。我有两个问题。一个是向 div 动态添加滚动条高度。我通过给出以像素为单位的高度添加了一个滚动条。它有效但已修复。我希望它是动态的。所以我尝试以百分比形式给出高度，但没有成功。

另一个问题是我需要用逗号将字符串拆分为新行。我尝试过使用拆分和连接功能。它仅删除逗号，但不会在新行中打印。

我正在尝试从图像 中实现搜索、表格和侧面详细信息

getdetails(x:any){
  this.detail = x.details;
  this.s = this.detail.split(',').join('\n')

.test{
    overflow-y: auto !important; 
    height: 100% !important;
}

<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
  <div class="ml-auto">
    <input
      class="form-control"
      name="search"
      [(ngModel)]="search"
      type="search"
      placeholder="Search"
    />
  </div>
</nav>
<br /><br />
<section>
  <div class="w-75 float-left overflow-auto test">
    <table class="table table-hover">
      <tr>
        <th>Date</th>
        <th>List Name</th>
        <th>No. of Entities</th>
    
      </tr>
      <tbody>
        <tr *ngFor="let items of data | filter: search">
          <td>{{ items.date }}</td>
          <td>{{ items.name }}</td>
          <td>{{ items.entities }}</td>
          <td>
            <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
          </td>

          
        </tr>
      </tbody>
    </table>
  </div>
</section>
<br />
<aside>
  <div class="w-20 float-right overflow-auto test">
    <div class="alert alert-dark">+Add Description</div>
    <p>{{s}}</p>
  </div>
</aside>

Answer 1

获取行数据很简单:

<tr *ngFor="let item of data | filter: search">
  .....
  <button type="button" 
    (click)='rowData(item)'
    class="btn btn-outline-secondary">
    Details
  </button>
</tr>

注意:查看按钮的点击事件，我们将整行数据传递给点击事件

rowData(record: any) {
   // now play with your record
}