Como exibir matriz valor múltiplo em um cartão utilizando angular 4

votos
1
[
{
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
}
]

Esta é a minha resposta em JSON

Eu tenho conjunto neste formato algumas categorias tem dois categoryServicemodel alguns apenas um como exibir esse formato JSON em cartão i precisar de toda matriz tiver a serem exibidos

Este é o meu Component.html Tenho valores armazenados nas fileiras agora eu preciso para exibir nome da categoria sob esse nome serviço e descrição alguma categoria tem dois serviços de alguns tem apenas um como exibi-lo

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

Este é o meu component.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);                
        });
    }

cartão

Eu estou mostrando dados como este, mas eu preciso de duas cartas com o mesmo nome de categoria um cartão pode conter apenas um detalhes do serviço

Publicado 20/09/2018 em 04:22
fonte usuário
Em outras línguas...                            


3 respostas

votos
1

Você pode tentar algo como isto.

<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>
Respondeu 20/09/2018 em 06:29
fonte usuário

votos
1

Você pode fazer algo como isto:

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

aqui está trabalhando exemplo: Stackblitz

Respondeu 20/09/2018 em 05:16
fonte usuário

votos
1

você pode simples colocar um loop dentro de loop como

 <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>
Respondeu 20/09/2018 em 04:39
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more