How to list an Array in a checkbox, breaking by one of the Array items?

Question

I have the Array below:

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'}
];

I would like to list this Array in a checkbox as follows:

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

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

I am mounting the instruction below unsuccessfully.

Anyone can help?

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

Answer 1

I don’t know what your knowledge in Angular, but, the assembly of directives *ngIf are wrong, also did not understand the pq to use tags li, but I will leave an example of how it can be done, for the layout that demonstrated in the question will have to go through the array 2 times to avoid repeating 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>

You can see a functional example with your code here.

Answer 2

by directive *ngFor hint that you are using Angular 2+.

Hint to make the controller template (*. html) more autonomous (*. ts):

based on your category list template, we have the interface:

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

at that time the category list is of the type CategoryValue[]

well, the main idea is to turn this list into an object, in which the key is the CategoryValue.category and the value itself CategoryValue[], example of the type:

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

an option to create this object is to use the reduce , example:

example.componentts.

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

With that you can do something like template, with the magic of 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>

outworking: see the result online here