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

这是我对json的回应

我有这种格式的数组一些类别有两个categoryServicemodel一些只有一个如何在卡片中显示这种json格式我需要显示所有数组

这是我的Component.html 我有一个存储在行中的值，现在我需要在服务名称和描述下显示类别名称一些类别有两个服务一些只有一个 如何显示它

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

---

您可以简单地在循环中放置一个循环，如

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

{{item.categoryName}


服务名称：-{category.serviceName}

服务描述：-{category.serviceDesc}

您可以执行以下操作：

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

{{item.categoryName}


服务名称：
你可以试试这样的东西

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


{{data.categoryName}


服务名称：
{{category.serviceName}}


服务说明：
{{category.serviceName}


请删除图片并放入代码。如果你甚至可以创建一个stackblizi编辑了我的代码，请再次检查。这很好，但我需要在单独的卡中显示服务详细信息，如一张卡中的第一个服务详细信息，另一张卡中的第二个服务详细信息。请查看我已更新的问题……根据你的回答，我可以在一张卡中显示所有详细信息，但我需要在单独的卡片中显示它。非常感谢你。这就是我要找的谢谢
 <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>

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

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