我有一个具有以下结构的对象数组：
[{
"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>
由于不同类型产品的列表非常广泛（我简化了对象数组），因此会生成非常大的滚动条。我试图按照相同的列表样式创建一个标签系统，通过该系统可以根据您选择的标签加载不同类型的产品。为此，我尝试使用以下引导程序组件
<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>
这样，我唯一要做的就是以静态方式在不同选项卡中显示不同类型的产品，但是我无法在它们之间进行动态导航。如果有人看到我在做什么错。问候，并提前谢谢你
这里是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>
Component：
tabs = [
{
label: 'Products',
items: ['Ball', 'Car', 'Bricks']
},
{
label: 'People',
items: ['Alice', 'Bob', 'Chris']
}, {
label: 'Animals',
items: ['Dog', 'Cat', 'Mouse']
}
];
selectedTab = 0;
tabs表示要在选项卡中显示的对象的数组。这比您发布的数据结构简单得多，但是原理应该相同。