html - 在 Angular 中将单词转换为图标

问题描述

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

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

商用电话
Whatsapp
Instagram
Facebook
电子邮件

这是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 Comercial：”，“Whatsapp”等......我希望这些名称分别被图标，字体图标，这些图标替换：

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

<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-icon_name”的其余部分，我该怎么做？请帮我！！

标签： htmlangulariconsfont-awesome

您可以使用管道来实现这一点。创建一个将您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>

html - 在 Angular 中将单词转换为图标

问题描述

解决方案

推荐阅读