显示和隐藏输入字段

Question

我正在尝试制作一个表格，它位于表格行的正下方。我知道我的表单格式不正确，但我正在尝试一次解决多个问题。我对 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>

我想要什么我只希望能够展示和编辑一个产品 我不处于编辑模式时的外观 当我处于编辑模式时它的外观所有表单都显示我只想要一个

Answer 1

如果您想一次打开一个编辑，您需要为每个项目设置一个唯一标识符。您可以借助布尔变量和模板中的迭代索引来完成此操作。这是您的代码的简化示例，我们使用您拥有的变量editMode，但我们也附上索引：

<table>
    <tr>
        <th>Product</th>
        <th>Category</th>
    <th></th>
    </tr>
    <tr *ngFor="let item of items; index as i">
        <ng-container *ngIf="editMode !== i">
            <td>{{item.productName}}</td>
            <td>{{item.categoryName}}</td>
        </ng-container>
        <! -- if assigned index to editMode matches -->
        <ng-container *ngIf="editMode === i">
            <td><input [(ngModel)]="item.productName" /></td>
            <td><input [(ngModel)]="item.categoryName" /></td>
        </ng-container>
    <td>
      <!-- Assign the index to edit mode, which item clicked -->
      <button (click)="editMode = i">Edit</button>
    </td>
    </tr>
</table>

完成编辑后，只需将editMode 设置为false。

Here's a STACKBLITZ

Answer 2

只需在您的控制器中创建一个函数来切换您的 editMode 属性：

editMode: boolean = false;

toogleEditMode() {
  this.editMode = this.editMode ? false : true; 
}

在你的模板中：

<button  (click)="toggleEditMode()" type="button" class="btn btn-secondary"><i class="far fa-edit"></i></button>