如何使用bootstrap在angular8中将详细信息行移到编辑单击行的旁边

npm install bootstrap

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

<table class="table table-hover">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people" (click)="selectPerson(person)">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>
        <button class="btn btn-primary" (click)="editPerson(person)">编辑</button>
      </td>
    </tr>
  </tbody>
</table>

export class AppComponent {
  people = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 },
    { name: '王五', age: 35 }
  ];
  selectedPerson: any;

  selectPerson(person: any) {
    this.selectedPerson = person;
  }

  editPerson(person: any) {
    this.selectedPerson = person;
  }
}

<div class="row">
  <div class="col-md-6">
    <h3>详细信息</h3>
    <div *ngIf="selectedPerson">
      <p>姓名：{{ selectedPerson.name }}</p>
      <p>年龄：{{ selectedPerson.age }}</p>
    </div>
  </div>
  <div class="col-md-6">
    <h3>编辑</h3>
    <div *ngIf="selectedPerson">
      <input type="text" [(ngModel)]="selectedPerson.name" class="form-control">
      <input type="number" [(ngModel)]="selectedPerson.age" class="form-control">
    </div>
  </div>
</div>