【发布时间】：2018-09-20 04:22:58
【问题描述】：
[
{
"categoryId": 1,
"categoryName": "Painting",
"categoryDesc": "Painting of all types",
"categoryServicemodel": [
{
"serviceId": 1,
"serviceName": "Test12",
"serviceDesc": "test12",
"isActive": 1
},
{
"serviceId": 3,
"serviceName": "TESTINGEXAMPLE ",
"serviceDesc": "TESTINGEXAMPLE Details Information",
"isActive": 1
}
],
"active": 1
},
{
"categoryId": 2,
"categoryName": "string",
"categoryDesc": "string",
"categoryServicemodel": [
{
"serviceId": 2,
"serviceName": "Test15",
"serviceDesc": "test15",
"isActive": 1
}
],
"active": 0
},
{
"categoryId": 4,
"categoryName": "carpenter",
"categoryDesc": "Carpenter",
"categoryServicemodel": [
{
"serviceId": 5,
"serviceName": "Test Carpenter ",
"serviceDesc": "Test carpenter Description",
"isActive": 1
}
],
"active": 0
},
{
"categoryId": 6,
"categoryName": "Telecommunications service provider",
"categoryDesc": "TSPs provide access to telephone and related communications services",
"categoryServicemodel": [
{
"serviceId": 4,
"serviceName": "ABC providers",
"serviceDesc": "Providing all types of networks",
"isActive": 1
}
],
"active": 0
},
{
"categoryId": 7,
"categoryName": "Test Name",
"categoryDesc": "Test Description",
"categoryServicemodel": [
{
"serviceId": 6,
"serviceName": "serv name test",
"serviceDesc": "serv desc test",
"isActive": 1
}
],
"active": 0
},
{
"categoryId": 17,
"categoryName": "Test98",
"categoryDesc": "Test98",
"categoryServicemodel": [
{
"serviceId": 7,
"serviceName": "Test98",
"serviceDesc": "Test98",
"isActive": 8
}
],
"active": 8
},
{
"categoryId": 35,
"categoryName": "Test101",
"categoryDesc": "Test101",
"categoryServicemodel": [
{
"serviceId": 8,
"serviceName": "Test101",
"serviceDesc": "Test101",
"isActive": 1
}
],
"active": 1
},
{
"categoryId": 38,
"categoryName": "Test105",
"categoryDesc": "Test105",
"categoryServicemodel": [
{
"serviceId": 9,
"serviceName": "Test105",
"serviceDesc": "Test105",
"isActive": 5
}
],
"active": 5
},
{
"categoryId": 39,
"categoryName": "Network",
"categoryDesc": "Telecom",
"categoryServicemodel": [
{
"serviceId": 10,
"serviceName": "Network one",
"serviceDesc": "Network one",
"isActive": 0
}
],
"active": 0
}
]
这是我在 json 中的回复
我有这种格式的数组有些类别有两个 categoryServicemodel 有些只有一个如何在卡片中显示这种 json 格式我需要显示所有数组
这是我的 Component.html 我有一个存储在行中的值现在我需要在该服务名称和描述下显示类别名称某些类别有两个服务有些只有一个 如何显示它
<div class="row">
<div class="col-12 col-lg-4" *ngFor="let item of rows; let i=index;">
<div class="card">
<div class="list-author-widget-link"><h3><b>{{item.categoryName}}</b></h3></div>
<div class="card-body">
<div class="media">
<span class="list-author-widget-link"><a >{{item.categoryServicemodel[i].serviceName}}</a></span><hr>
<p>
<span><i class="fa fa-building-o"></i><b> Service Name :</b></span><a>{{item.categoryServicemodel[i].serviceName}}</a><br><br>
<span><i class="fa fa-envelope-o"></i><b> Service Description :</b></span><a>{{item.categoryServicemodel[i].serviceDesc}}</a>
</p><hr>
</div>
</div>
</div>
</div>
</div>
这是我的组件.ts
export class ServiceComponent implements OnInit{
rows: any[];
category: [''];
services: [''];
serviceModel: any[];
Categoryrows: any[];
serveName;
serveDesc;
categoryName: any[];
constructor(private router: Router,private service: PostGetService, private http: HttpClient){
this.http.get(this.apiUrl[1])
.subscribe((category: any) => {
this.Categoryrows = category;
console.log(this.Categoryrows);
});
}
ngOnInit(){
this.service.getAllCategories()
.subscribe(data => {
this.rows = data.json();
console.log(this.rows);
});
}
我正在显示这样的数据，但我需要两张具有相同类别名称的卡片一张卡片只能包含一个服务详细信息
【问题讨论】：
-
请把图片去掉，放上代码。如果你甚至可以创建一个 stackbliz
-
我已经编辑了我的代码，请检查一次
标签： angular