显示和隐藏输入字段

Question

我正在尝试制作一个位于 table 行下方的表单。我知道我的表格格式不正确，但我正在尝试一次解决多个问题。我对 angular 很陌生，我只玩过一次英雄之旅。我需要构建一个 java 后端和 Angular 前端，所以请注意这一点。当我点击我的编辑时，我想显示我的一个表格，但弹出所有表格。我不能 link 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 属性:

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>

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

显示和隐藏输入字段

Showing and Hiding input fields

typescript

angular-ui-bootstrap

angular