onclick 获取该行数据并将滚动条添加到 div

Question

我是角度的新手。 我有两个问题。一个是动态地向 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
}

Answer 2

 .test { overflow-y: auto !important; height: calc(100vh - 54px); } ::-webkit-scrollbar { width: 8px; height: 10px; } ::-webkit-scrollbar-thumb { border-radius: 8px; background: #c2c9d2; }

 <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><br> <div class="container-fluid"> <section class="row"> <div class="col-md-8 col-12 overflow-auto test"> <table class="table table-hover"> <tr> <th>Date</th> <th>List Name</th> <th>No. of Entities</th> <th>Actions</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> <div class="col-md-4 col-12 overflow-auto test"> <div class="alert alert-dark">No description yet <span class="font-weight-bold">+Add Description</span> </div> <p>{{s}}</p> </div> </section> </div>