Question

[
{
"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>&nbsp; Service Name :</b></span><a>{{item.categoryServicemodel[i].serviceName}}</a><br><br>
             <span><i class="fa fa-envelope-o"></i><b>&nbsp; Service Description :</b></span><a>{{item.categoryServicemodel[i].serviceDesc}}</a>
            </p><hr>
           </div>
        </div>
     </div>
   </div>
</div>

这是我的组件。

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

我正在显示这样的数据，但我需要两张具有相同类别名称的卡，一张卡只能包含一个服务详细信息

Answer 1

您可以简单地在循环之内放一个循环，例如

 <div  *ngFor="let item of rows;" >
   <p>{{item.categoryName}}</p>
    <hr/>
   <div *ngFor="let category of item.categoryServicemodel">
     <p>Service Name:-{{category.serviceName}}</p>
     <p>Service Description:-{{category.serviceDesc}}</p>
   </div>
   <hr/>
</div>

Answer 2

您可以执行以下操作：

<div class="row">
    <div class="col-12 col-lg-4" *ngFor="let item of rows; let i=index;">
        <div class="list-author-widget-link">
            <h3><b>{{item.categoryName}}</b></h3>
        </div>
        <hr/>
        <div class="card" *ngFor="let category of item?.categoryServicemodel">
            <div class="card-body">
                <div class="media">
                    <p>
                        <span><i class="fa fa-building-o"></i><b>&nbsp; Service Name :</b></span>
                        <a>{{category.serviceName}}</a><br><br>
                        <span><i class="fa fa-envelope-o"></i><b>&nbsp; Service Description :</b></span>
                        <a>{{category.serviceName}}</a>
                    </p>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

这是工作示例：Stackblitz

Answer 3

您可以尝试这样的事情。

<div class="row">
    <div class="col-md-12 col-lg-4" *ngFor="let data of rows; let i=index;">
        <div class="list-author-widget-link">
            <h3><b>{{data.categoryName}}</b></h3>
        </div>
        <hr/>
        <div class="card" *ngFor="let category of data?.categoryServicemodel">
            <div class="card-body">
                <div class="media">
                    <p>
                        <span><i class="fa fa-building-o"></i><b>&nbsp; Service Name :</b></span>
                        <a>{{category.serviceName}}</a><br><br>
                        <span><i class="fa fa-envelope-o"></i><b>&nbsp; Service Description :</b></span>
                        <a>{{category.serviceName}}</a>
                    </p>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

如何使用angular 4在卡中显示多值数组

3 个答案: