如何使用 html / angular / javascript 扩展表格

Question

我是 Angular 2+ 的新手。我在 angular web api 中创建了一个表。我需要这样做——当我按下按钮（图标）时，用我的 web api 中的数据展开表格。 我是这样做的，但它不起作用。有人可以帮我解决吗？

app.component.html

   <div class="card-body">
      <table datatable class="table table-striped table-bordered hover" [dtOptions]="dtOptions" style="width:100%">
         <thead>
            <tr>
               <th width="2%" class="text-center"></th>
               <th width="8%" class="text-center">Name</th>
               <th width="8%" class="text-center">Price</th>
            </tr>
         </thead>
         <tbody>
            <tr *ngIf="empty">
               <td colspan="8" class="text-center" translate>shared.table.not-found</td>
            </tr>
            <tr *ngFor="let product of products; index as i" (click)="onSelectLine(i)"
            [ngClass]="{'tr-selected': selectedIndex === i}">
            <td class="text-left">
               <a type="button" (click)="onProductComponent(product)">
               <i class="fa fa-chevron-right"></i>
               </a>
            </td>
            <td class="text-left">{{product.name}}</td>
            <td class="text-left">{{product.price}}</td>
            </tr>
         <thead>
            <tr>
               <td colspan="12" >
                  <div *ngIf="isShown" class="row container-fluid"  id="divshow" >
               <td class="text-left">{{product.name}}</td>
               <td class="text-left">{{product.price}}</td>
               </div>
               </td>
            </tr>
         </thead>
         </tbody>
      </table>
   </div>
</div>

app.component.ts

isShown = false;

onProductComponent(product: Product) {
        this.isShown = ! this.isShown;
        this._product = product;
        this.productComponentService.getProduct(this._product.id)
        .subscribe(element => {
        });
} 

应该是这样的

Answer 1

您可以为每个产品添加isShown 属性。并且只改变那个值。

如果您想打开多行，而不仅仅是从 onProductComponent 中删除 this.products.map() 部分

 public products = [
    { name: "Product 1", price: 101, isShown: false },
    { name: "Product 2", price: 102, isShown: false },
    { name: "Product 2", price: 103, isShown: false },
    { name: "Product 3", price: 104, isShown: false },
    { name: "Product 5", price: 105, isShown: false }
  ];

  onProductComponent(product) {
    this.products.map(p => {
      if (product !== p) {
        p.isShown = false;
      }
    });
    product.isShown = !product.isShown;
  }

这将导致 HTML 发生变化，因为您可以将隐藏部分移动到循环内。因为你不需要保存product。

<div class="card-body">
  <table datatable class="table table-striped table-bordered hover" style="width:100%">
    <thead>
      <tr>
        <th width="2%" class="text-center"></th>
        <th width="8%" class="text-center">Name</th>
        <th width="8%" class="text-center">Price</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let product of products; index as i">
        <tr>
          <td class="text-left">
            <a type="button" (click)="onProductComponent(product)">
              <i class="fa fa-chevron-right"></i>
              Open
            </a>
          </td>
          <td class="text-left">{{product.name}}</td>
          <td class="text-left">{{product.price}}</td>
        </tr>
        <thead>
          <tr>
            <td colspan="12">
              <div *ngIf="product.isShown" class="row container-fluid" id="divshow">
                <span class="text-left">{{product.name}}</span>
                <span class="text-left">{{product.price}}</span>
              </div>
            </td>
          </tr>
        </thead>
      </ng-container>
    </tbody>
  </table>
</div>

您可以查看一个工作示例here