0

Tenho o Array abaixo:

this.ca = this.categorias = [
    {cate: 'oquefazer' , tipo: 'ACESSIBILIDADE:', nome: 'Cadeirante'        , icone: 'fa-wheelchair'},
    {cate: 'oquefazer' , tipo: 'ACESSIBILIDADE:', nome: 'Def.Visual'        , icone: 'fa-blind'},
    {cate: 'oquefazer' , tipo: 'ACESSIBILIDADE:', nome: 'Def.Auditivo'      , icone: 'fa-deaf'},
    {cate: 'oquefazer' , tipo: 'ACEITA CARTÕES:', nome: 'C.Cred. Amex'      , icone: 'fa-cc-amex'},
    {cate: 'oquefazer' , tipo: 'ACEITA CARTÕES:', nome: 'C.Cred. Visa'      , icone: 'fa-cc-visa'},
    {cate: 'oquefazer' , tipo: 'ACEITA CARTÕES:', nome: 'C.Cred. Diners'    , icone: 'fa-cc-diners'},
    {cate: 'oquefazer' , tipo: 'ACEITA CARTÕES:', nome: 'C.Cred. Mastercard', icone: 'fa-cc-mastercard'}
];

Gostaria de listar esse Array num checkbox da seguinte maneira:

ACESSIBILIDADE:
      [] Cadeirante   [] Def. Visual   [] Def.Auditivo

ACEITA CARTÕES:
      [] C.Cred.Amex  []C.Cred Visa    [] C.Cred. Diners  []C.Cred.Mastercard

Estou montando a instrução abaixo sem sucesso.

Alguém pode ajudar?

<div>
    <ul>
        <li *ngFor="let item of ca">
            <span *ngif {{item.tipo}} = 
                <label>{{item.tipo}}</label>
                <input id={{item.nome}} type="checkbox" value={{item.nome}} />
            <label>{{item.nome}}</label>
        </li>
    </ul>
</div>

2 Respostas 2

1

Não sei qual seu conhecimento em Angular, mas, a montagem das diretivas *ngIf estão erradas, também não entendi o pq de utilizar tags li, mas vou deixar um exemplo de como pode ser feito, pelo layout que demonstrou na pergunta terá que percorrer o array 2 vezes para não permitir que repita os tipos:

<div>
  <span>ACESSIBILIDADE: </span><br>
  <span *ngFor="let item of categorias">
    <span *ngIf="item.tipo === 'ACESSIBILIDADE:'">
      <input type="checkbox" id="{{item.nome}}" value="{{item.nome}}" />
      <label for="{{item.nome}}">{{ item.nome }}</label>
    </span>
  </span> <br><br>
  <span>ACEITA CARTÕES: </span><br>
  <span *ngFor="let item of categorias">
    <span *ngIf="item.tipo === 'ACEITA CARTÕES:'">
      <input type="checkbox" id="{{item.nome}}" value="{{item.nome}}" />
      <label for="{{item.nome}}">{{ item.nome }}</label>
    </span>
  </span>
</div>

Pode ver um exemplo funcional com seu código aqui.

2
  • Entendi. Era isso que precisava. Percorrer os diferentes tipos do array. No caso, tenho mais alguns tipos, então posso fazer conforme seu exemplo. Pergunta: tem como fazer um nfFor dentro de outro, assim primeiro percorrro por tipo e depois por nome. Commented 8/04/2021 às 20:24
  • É, eu só percorri o array 2 vezes por causa da maneira que quer demonstrar na tela, dependendo da exibição dá pra percorrer apenas uma. Dá sim tbm, dá pra ter um *ngFor dentro de outro sim, só tem que ter cuidado que complica um pouco o controle do código, mas, dá pra usar sim.
    – LeAndrade
    Commented 8/04/2021 às 20:32
1

pela diretiva *ngFor dá entender que está usando Angular 2+.

Sugestão para deixar mais autônomo o template (*.html) do controlador (*.ts):

com base no seu modelo de lista categoria, temos a interface:

interface CategoryValue {
  category: string;
  type: string;
  name: string;
  icon: string;
}

nesse momento a lista de categoria é do tipo CategoryValue[]

bem, a ideia principal é transformar essa lista em um objeto, no qual a chave é o CategoryValue.category e o valor o próprio CategoryValue[], exemplo do tipo:

type Categories = { [k: string]: CategoryValue[] };

uma opção para criar esse objeto é usar o reduce , exemplo:

example.component.ts

import { Component } from '@angular/core';

interface CategoryValue {
  category: string;
  type: string;
  name: string;
  icon: string;
}

type Categories = { [k: string]: CategoryValue[] };

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Angular';

 //poderia vir de um serviço, ex CategoriesService.getCategoryList
  categoryList: CategoryValue[] = [
    {
      category: 'oquefazer',
      type: 'ACESSIBILIDADE',
      name: 'Cadeirante',
      icon: 'fa-wheelchair',
    },
    {
      category: 'oquefazer',
      type: 'ACESSIBILIDADE',
      name: 'Def.Visual',
      icon: 'fa-blind',
    },
    {
      category: 'oquefazer',
      type: 'ACESSIBILIDADE',
      name: 'Def.Auditivo',
      icon: 'fa-deaf',
    },
    {
      category: 'oquefazer',
      type: 'ACEITA CARTÕES',
      name: 'C.Cred. Amex',
      icon: 'fa-cc-amex',
    },
    {
      category: 'oquefazer',
      type: 'ACEITA CARTÕES',
      name: 'C.Cred. Visa',
      icon: 'fa-cc-visa',
    },
    {
      category: 'oquefazer',
      type: 'ACEITA CARTÕES',
      name: 'C.Cred. Diners',
      icon: 'fa-cc-diners',
    },
    {
      category: 'oquefazer',
      type: 'ACEITA CARTÕES',
      name: 'C.Cred. Mastercard',
      icon: 'fa-cc-mastercard',
    },
  ];

  categories: Categories;

  constructor() {
    this.categories = this.categoryList.reduce((accumulator, currentValue) => {
      if (!Array.isArray(accumulator[currentValue.type])) {
        accumulator[currentValue.type] = [];
      }

      accumulator[currentValue.type].push(currentValue);

      return accumulator;
    }, {} as Categories);
  }
}

Com isso você consegue fazer algo assim no template, com a mágia do pipe keyvalue:

example.component.html

<div>
  <ul *ngFor="let categoryKeyAndValue of categories | keyvalue; let indexKey = index">
      <li>
        <strong>{{categoryKeyAndValue.key}}:</strong>
        <ul>
          <li *ngFor="let categoryValue of categoryKeyAndValue.value; let indexValue = index">
              <input type="checkbox" [name]="categoryValue.category" [id]="indexKey + '_' + indexValue" [value]="categoryValue.name">
              <label [for]="indexKey + '_' + indexValue">{{categoryValue.name}}</label>
          </li>
        </ul>
      </li>
  </ul>
</div>

resultado: veja o resultado online aqui

inserir a descrição da imagem aqui

1
  • Bela resposta, não conhecia esse pipe, muito legal.
    – LeAndrade
    Commented 8/04/2021 às 22:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .