Question

我正在尝试在表格行下创建一个表格。我知道表格的格式不正确，但是我想一次解决多个问题。我对“棱角分明”很陌生，我只做一次英雄巡回演出。而且我需要构建一个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: 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>

在您的模板中：

from itertools import chain

Answer 2

如果要一次打开一个编辑，则每个项目都需要具有唯一的标识符。您可以借助布尔变量和模板中的迭代索引来完成此操作。这是您的代码的简化示例，其中我们使用了您拥有的变量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

显示和隐藏输入字段

2 个答案: