显示和隐藏输入字段

我正在尝试制作一个表格行正下方的表格。我知道我的表格格式不正确，但我正在尝试同时解决多个问题。我对 angular 很陌生，我只去过一次英雄之旅。我需要构建一个 java 后端和 Angular 前端，所以请注意这一点。我想在单击我的编辑时显示我的一个表单，但所有表单都弹出。我无法链接 stackblitz，因为我确实尝试过，因为某些原因它不允许我这样做。如果您对我想做什么有任何疑问，请告诉我。给出的第一个答案没有回答我的问题，所以请提交更多。

home.component.html

 <div class="table-responsive">
        <table  class="table table-bordered table-striped">
          <thead>
          <tr>
            <th>Id</th>
            <th>Product</th>
            <th>Category</th>
            <th>FullPrice <i id ="asc-desc1"class="fas fa-angle-down" (click)="SortPrice($event)"></i></th>
            <th>Saleprice <i id ="asc-desc2"class="fas fa-angle-down" (click)="SortSale($event)"></i> </th>
            <th>Supplier</th>
            <th>Discount<i id ="asc-desc3"class="fas fa-angle-down" (click)="SortDiscount($event)"></i></th>
            <th>Edit</th>
          </tr>
          </thead>
          <tbody  *ngFor="let home of home | paginate:{itemsPerPage:20,currentPage: p}" >
          <tr *ngIf="!editMode">
            <td >{{home.id}}</td>
            <td>{{home.productName}}</td>
            <td>{{home.category.categoryName}}</td>
            <td>{{home.fullPrice}}</td>
            <td>{{home.salePrice}}</td>
            <td>{{home.supplier.supplierName}}</td>
            <td>{{home.discount }}</td>
            <td class="text-right" id="tableDataBtns">
              <div class="btn-group" role="group">
                <button  (click)="editMode=true" type="button" class="btn btn-secondary"><i class="far fa-edit"></i></button>
                <button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
              </div>
            </td>
          </tr>
          <tr *ngIf="editMode">
          <td><input placeholder="{{home.id}}"/></td>
          <td><input placeholder="{{home.productName}}"/></td>
          <td><input placeholder="{{home.category.categoryName}}"/></td>
          <td><input placeholder="{{home.fullPrice}}"/></td>
          <td><input placeholder="{{home.salePrice}}"/></td>
          <td><input placeholder="{{home.supplier.supplierName}}"/></td>
          <td><input placeholder="{{home.discount }}"/></td>
          <td class="text-right" id="tableDataBtns">
            <div class="btn-group" role="group">
              <button  (click)="editMode=true" type="button" class="btn btn-secondary"><i class="far fa-edit"></i></button>
              <button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
            </div>
          </td>
        </tr>


          </tbody>
        </table>
        <pagination-controls class="myPagination" (pageChange)="p= $event"></pagination-controls>
      </div>

我想要什么 我只想要能够显示和编辑一个产品我不处于编辑模式时的外观 我处于编辑模式时的外观 所有表格显示 我只想要一个