以角度将单词转换为图标

Question

我有一页页，页脚包含很多健身房，联系人，位置等信息.

例如，我选择的健身房有5种联系方式，即：

商业Phone

• Whatsapp

• Instagram

• Facebook

• Email

这就是json的样子：

"ExibirContatos": [
                {
                    "ID_TipoContato": "2",
                    "TipoDescricao": "Telefone comercial",
                    "Contato": "(31)2523-0672"
                },
                {
                    "ID_TipoContato": "9",
                    "TipoDescricao": "Whatsapp",
                    "Contato": "(31)98428-6287"
                },
                {
                    "ID_TipoContato": "5",
                    "TipoDescricao": "Instagram",
                    "Contato": "@br_fit_"
                },
                {
                    "ID_TipoContato": "7",
                    "TipoDescricao": "Facebook",
                    "Contato": "https://www.facebook.com/brfitbh/"
                },
                {
                    "ID_TipoContato": "4",
                    "TipoDescricao": "E-mail",
                    "Contato": "contato@brfitbh.com.br"
                }
            ]

TS：

import {HttpClient} from '@angular/common/http';

import { Academia } from '../../classes/academia';

interface AcademiaRequest {
  ACADEMIA_INFO: any;
}

export class HomePageComponent implements OnInit {

  academia: Academia = new Academia();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.receberAcademia(this.academia);
  }

  receberAcademia(academia) {
    this.http
      .get<AcademiaRequest>(
        'http://fitgroup.com.br/vysor_vendas_online/fg_vendas.php?AuthToken=FlnPoU230xGF&Metodo=academiaLoad&IDCliente=000949'
      )
      .subscribe(response => {
        academia.nome = response.ACADEMIA_INFO.AcademiaDados.NomeAcademia;
        academia.rua = response.ACADEMIA_INFO.AcademiaDados.EnderecoLogradouro;
        academia.numero = response.ACADEMIA_INFO.AcademiaDados.EnderecoNumero;
        academia.cep = response.ACADEMIA_INFO.AcademiaDados.EnderecoCEP;
        academia.cidade = response.ACADEMIA_INFO.AcademiaDados.EnderecoCidade;
        academia.estado = response.ACADEMIA_INFO.AcademiaDados.EnderecoUF;
        academia.contatos = response.ACADEMIA_INFO.VendasOnline.ExibirContatos;
      });
  }
}

学术班：

export class Academia {

  registros: number;
  nome: string;

  // Endereço

  rua: string;
  numero: string;
  cep: string;
  cidade: string;
  estado: string;

  // Contato

  contatos: any[];
}

最后，我的HTML：

<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
   <h5 class="mb-4 ml-4 font-weight-bold">
      CONTATO:
   </h5>
   <ul class="f-address">
      <li *ngFor="let contatos of academia.contatos">
         <p> {{contatos.TipoDescricao }}: {{ contatos.Contato }} </p>
      </li>
   </ul>
</div>

它印的是这样的东西：

​

​

但我不想要联系人的名字，我不想要"Telefone Comer西尔“，"Whatsapp”等等.我希望将这些名称分别替换为图标、字体图标，这些图标：

1. <i class="fas fa-phone-alt"></i>
2. <i class="fas fa-whatsapp"></i>
3. <i class="fas fa-instagram"></i>
4. <i class="fas fa-facebook"></i>
5. <i class="fas fa-envelope"></i>

但我不知道如何进行这样的转换，我甚至在这段代码中想过：

<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
      <h5 class="mb-4 ml-4 font-weight-bold">
            CONTATO:
      </h5>
      <ul class="f-address">
            <li *ngFor="let contatos of academia.contatos">
                  <p> <i class="fas {{ contatos.TipoDescricao }}"></i> {{ contatos.Contato }} </p>
            </li>
      </ul>
</div>

但首先，我需要转换为图标的其他名称“fa-图标_ name”，我如何做到这一点？请救救我！

Answer 1

我能找到解决这个问题的两种方法：

1-创建一个方法让图标对应于描述，但是它会影响性能，因为每次更改都会调用它。

2.创建一个管道，这是推荐的方法：

import { Pipe, PipeTransform } from '@angular/core';

// Note that I have used Font Awesome 5.x for this demo.
const descriptionIconClassMapper = {
  'E-mail': 'fas fa-envelope',
  'Telefone comercial': 'fas fa-phone-alt',
  Facebook: 'fab fa-facebook',
  Instagram: 'fab fa-instagram',
  Whatsapp: 'fab fa-whatsapp'
};

@Pipe({
  name: 'descriptionToIconClass'
})
export class DescriptionToIconClassPipe implements PipeTransform {
  transform<T extends keyof typeof descriptionIconClassMapper>(
    description: T
  ): typeof descriptionIconClassMapper[T] {
    return descriptionIconClassMapper[description];
  }
}

在HTML中：

<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
  <h5 class="mb-4 ml-4 font-weight-bold">
    CONTATO:
  </h5>

  <ul class="f-address" *ngIf="academiaInfo$ | async as academiaInfo">
    <li *ngFor="let contato of academiaInfo.VendasOnline.ExibirContatos">
      <p><i class="mr-1" [ngClass]="contato.TipoDescricao | descriptionToIconClass"></i>{{ contato.Contato }}</p>
    </li>
  </ul>
</div>

一些提示

不要直接从组件调用http请求。创建一个服务来包装这个；

2-而不是subscribe，更喜欢使用async管道来处理GET请求；

3-不使用any，您可以使用工具从JSON (如http://jsontots.com )生成类型记录接口。

4-除非您有充分的理由使用class，否则更喜欢interfaces，因为它不会影响构建的大小。

5-

Answer 2

你可以用管道来达到这个目的。创建一个以contatos.TipoDescricao作为输入的管道，并返回匹配的图标。

@Pipe({
  name: 'descriptionToIcon'
})
export class DescriptionToIconPipe implements PipeTransform {

  private static readonly iconsForDescriptions:Array<{desc:string, icon:string}> = [
    {desc: 'Telefone comercial', icon: 'fa-phone-alt'},
    // Add all other texts and icons as pairs as well
  ]

  transform(value: any, args?: any): any {
    return DescriptionToIconPipe.iconsForDescriptions.find(item => item.desc === value).icon;
  }

}

在HTML中

<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
      <h5 class="mb-4 ml-4 font-weight-bold">
            CONTATO:
      </h5>
      <ul class="f-address">
            <li *ngFor="let contatos of academia.contatos">
                  <p> <i class="fas {{ contatos.TipoDescricao | descriptionToIcon}}"></i> {{ contatos.Contato }} </p>
            </li>
      </ul>
</div>