нажмите на эту информацию и добавьте полосы прокрутки в div

Question

Я новичок в angular. У меня есть 2 проблемы. Один динамически добавляет высоту полосы прокрутки в div. Я добавил полосу прокрутки, указав высоту в пикселях. это работало, но это исправлено. Я хочу, чтобы это было динамично c. поэтому я попытался указать высоту в процентах, но это не сработало.

Другая проблема заключается в том, что мне нужно разбить строку запятой на новую строку. Я попытался с помощью функции разделения и соединения. он удаляет только запятые, но не печатает в новой строке.

Я пытаюсь выполнить поиск, таблицы и дополнительные данные из изображения

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>