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

Question

I'm new in angular 2+. I have created a table in angular web api. I need to do it like this - when I press the button (icon) expand the table with the data from my web api. I did it that way but it's not working. Could someone help me with a solution?

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 => {
        });
} 

It would be like this

Answer 1

You can add isShown property to every product. And change only that value.

If you want to have multiple rows opened than just remove the this.products.map() part from onProductComponent

 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;
  }

This will lead to change in HTML because you can move the hidden section inside of the loop. Because you don't need to save 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>

You can check a working example here