如何通过动态标签系统显示不同的列表？

Question

我有一个具有以下结构的对象数组：


[{
  "name": "Equipment",
  "functional_id": "furniture",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "White bags",
      "description": "Reusable",
      "id": 11,
      "path": "",
      "items": [
        {
          "name": "Small model",
          "description": "25",
          "price": 0,
          "functional_id": "white_bags_small_model_by_25"
        },
        {
          "name": "Medium model",
          "description": "20",
          "price": 0,
          "functional_id": "white_bags_medium_model_by_20"
        },
        {
          "name": "Large model",
          "description": "10",
          "price": 0,
          "functional_id": "white_bags_large_model_by_10"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Burgundy bags",
      "description": "Reusable",
      "id": 12,
      "path": "",
      "items": [
        {
          "name": "Small model",
          "description": "25",
          "price": 0,
          "functional_id": "bags_burgundy_bags_small_model_by_10"
        },
        {
          "name": "Large model",
          "description": "Par 10",
          "price": 0,
          "functional_id": "bags_burgundy_bags_large_model_by_10"
        }
      ]
    }    
  ],
  "sorting": 2300"
},
{
  "name": "Documents",
  "functional_id": "docs",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "Book of conventions",
      "id": 17,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "agreement_book"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Procedure posters",
      "description": "Procedure",
      "id": 18,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "posters_procedure_of_taking_in_charge"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Services Brochures",
      "description": "Brochures",
      "id": 19,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "services_brochures"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Catalogue",
      "id": 20,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "catalogue"
        }
      ]
    }
  ],
  "sorting": 2400
},
{
  "name": "Products",
  "functional_id": "prods",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "Articles",
      "id": 19,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_1"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Procedure_b",
      "description": "Procedure",
      "id": 24,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_charge"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Book Services",
      "description": "Book Services",
      "id": 26,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_services"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Catalogue",
      "id": 32,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "catalogue"
        }
      ]
    }
  ],
  "sorting": 4400
}
]

我在我的应用程序中使用以下 html:

表示它

  <div class='col-lg-12' *ngIf="this.market && this.market.length>0 ">
    <ng-container *ngFor='let category of this.market | orderBy:"sorting"'>
      <h2>{{category.name}}</h2>
      <table class='table table-bordered bg-white'>
        <thead class='bg-quinary  d-xl-table-row  d-none'>
        <th>Produits</th>
        <th>Description</th>
        <th>Prix HT</th>
        <th>Quantités</th>
        </thead>
        <tbody>
        <tr *ngFor='let product of category.products | orderBy:"id"' class="  ">
          <td>
            <div class="d-flex">
              <div *ngIf="product && product.path " style="width: 150px">
                <img class="img-fluid" src="{{product.file}}" alt="" width="150px">
              </div>
              <div style="flex: 5" class="p-2">
                <h2 class="p-1">{{product.name}}</h2>
                <p [innerHTML]="product.description" class="text-muted" *ngIf=" product && product.description"></p>
              </div>
            </div>
          </td>
          <td class="p-0 d-xl-table-cell d-none">
            <ul class="p-0 m-0">
              <li *ngFor='let item of product.items'>
                <div style="line-height: 24px" class="">
                  <p>{{item.name}}</p>
                  <p class="text-muted">{{item.description}}</p>
                </div>
              </li>
            </ul>
          </td>
          <td class="p-0 d-xl-table-cell d-none">
            <ul class="p-0 m-0">
              <li *ngFor='let item of product.items'>
                <span>{{item.price || '-'}} €</span>
              </li>
            </ul>
          </td>
          <td class="p-0 d-xl-table-cell d-none">
            <ul class="p-0 m-0">
              <li *ngFor='let item of product.items'>
                <input type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item)" style="height: 45px; line-height: 45px" min="0">
              </li>
            </ul>
          </td>
          <td class="p-0 d-table-cell d-xl-none w-100">
            <ul class="font">
              <li *ngFor='let item of product.items' class=" p-3 item">
                <div class="d-flex flex-column w-25  align-self-center">
                  <p>{{item.name}}</p>
                  <p class="text-muted">{{item.description}}</p>
                </div>
                <span class="d-flex flex-column  w-25 align-self-center">{{item.price || '-'}} €</span>
                <input  class="d-flex flex-column  w-25 align-self-center" type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item, product.id)" style="height: 45px" min="0"   >
              </li>
            </ul>
          </td>
        </tr>
        </tbody>
      </table>
    </ng-container>
  </div>

由于不同类型的产品列表非常广泛（我简化了对象数组），因此会生成一个非常大的滚动条。我正在尝试按照相同的列表样式创建一个选项卡系统，通过它可以根据您 select 的选项卡加载不同类型的产品。为此，我尝试使用以下 bootstrap 组件

<div class='col-lg-12' *ngIf="this.market && this.market.length>0 ">
    <nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" style="background-color: #0e5fa4;" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><p style="font-weight: bold; font-size: 15px; color: white; padding: 0;">Equipment</p></a>
    <a class="nav-item nav-link" style="background-color: white; border: 0.5px solid #0e5fa4;" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Documents</a>
    <a class="nav-item nav-link" style="background-color: white; border: 0.5px solid #0e5fa4;" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Products</a>
  </div>
</nav>

这样一来，我唯一能做的就是以静态方式在不同的选项卡中显示不同类型的产品，但我无法在它们之间进行动态导航。如果有人看到我做错了什么。提前问候和感谢

Answer 1

这是 Angular 中动态选项卡的准系统实现，每个选项卡中都有一个项目列表。在 Stackblitz.

上进行演示

模板:

<!-- Tab Buttons -->

<ul class="tabs">
    <li *ngFor="let tab of tabs; let i = index">
        <button (click)="selectedTab = i" [ngStyle]="selectedTab === i && {'background':'blue', 'color':'white'}">{{tab.label}}</button>
    </li>
</ul>

<!-- Tab Content -->

<div>
    <h3>{{tabs[selectedTab].label}}</h3>
    <ul>
        <li *ngFor="let item of tabs[selectedTab].items">{{item}}</li>
    </ul>
</div>

组件:

  tabs = [
    {
      label: 'Products',
      items: ['Ball', 'Car', 'Bricks']
    },
    {
      label: 'People',
      items: ['Alice', 'Bob', 'Chris']
    }, {
      label: 'Animals',
      items: ['Dog', 'Cat', 'Mouse']
    }
  ];
  selectedTab = 0;

组件中的

tabs 表示要用选项卡显示的对象的数组。这比您发布的数据结构简单得多，但原理是相同的。

如何通过动态标签系统显示不同的列表？

how to display different lists by a dynamic tab system?

html

listview

list

angular7