angular - 仅使用 [ngClass] 条件正确显示一种字体真棒图标
问题描述
我正在建立一个用户个人资料,用户可以在其中提交指向他或她的社交媒体帐户的链接。每个帐户都用一个可点击的链接表示。应该选择哪个图标由 [ngClass] 中的多个条件决定,代码如下:
<div *ngIf="socialMediaLinkList.length > 0" class="topic">
<strong>can be followed on:</strong>
<a *ngFor="let socialMediaLink of socialMediaLinkList" [href]="socialMediaLink.link">
<i [title]="socialMediaLink.socialMediaType"
[ngClass]="{
'fa fa-youtube':socialMediaLink.socialMediaType === 'YOUTUBE',
'fa fa-facebook-official':socialMediaLink.socialMediaType === 'FACEBOOK',
'fa fa-twitter':socialMediaLink.socialMediaType === 'TWITTER',
'fa fa-reddit':socialMediaLink.socialMediaType === 'REDDIT',
'fa fa-pinterest':socialMediaLink.socialMediaType === 'PINTEREST',
'fa fa-linkedin-square':socialMediaLink.socialMediaType === 'LINKEDIN',
'fa fa-instagram':socialMediaLink.socialMediaType === 'INSTAGRAM',
'fa fa-google-plus':socialMediaLink.socialMediaType === 'GOOGLE_PLUS',
'fa fa-tumblr-square':socialMediaLink.socialMediaType === 'TUMBLR',
'fa fa-vimeo-square':socialMediaLink.socialMediaType === 'VIMEO',
'fa fa-vk':socialMediaLink.socialMediaType === 'VKONTAKTE',
'fa fa-weibo':socialMediaLink.socialMediaType === 'WEIBO',
'fa fa-renren':socialMediaLink.socialMediaType === 'RENREN',
'fa fa-odnoklassniki':socialMediaLink.socialMediaType === 'ODNOKLASSNIKI',
'fa fa-flickr':socialMediaLink.socialMediaType === 'FLICKR'
}"></i>
</a>
<mat-divider></mat-divider>
</div>
问题是条件列表中只有最后一个图标正确显示,所有其他图标都显示为统一块,如下所示:
这只是因为 FLICKR 恰好在随机生成的社交媒体帐户列表中。如果 FLICKR 不在该列表中,则所有社交媒体帐户图标都将被阻止。例如,如果我将 ODNOKLASSNIKI 的条件与 FLICKR 交换,则情况会发生变化,从而使 ODNOKLASSNIKI 成为最后一个。现在 Odnoklassniki 是唯一可以正确显示的图标。
我在这里遵循了 ngClass 示例https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/就我而言,我没有犯任何错误。
下面是如何使用 SocialMediaLink 类初始化列表
export class SocialMediaLink{
constructor(public socialMediaType:string, public link: string){}
}
if(this.aboutSection.socialMediaAccounts !== undefined){
this.selectedSocialMediaAccounts = new Map<SocialMedia,string>((<any>Object).entries(this.aboutSection.socialMediaAccounts));
this.selectedSocialMediaAccounts.forEach((link: string, socialMediaType:SocialMedia) =>
this.socialMediaLinkList.push(new SocialMediaLink(socialMediaType.toString(), link)));
}
谁能告诉我如何解决这个问题?谢谢
编辑:这是我正在使用的字体真棒cdn @import ' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css ';
解决方案
在您的ngClass
绑定中,如果条件是true
,它会设置fa
类。但是,以下条件是false
,将其删除。这就是为什么fa
仅当最后一个条件为 时才保留类的原因true
。
您应该在条件绑定fa
之外设置公共类:ngClass
<i [title]="socialMediaLink.socialMediaType"
class="fa"
[ngClass]="{
'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',
'fa-facebook-official': socialMediaLink.socialMediaType === 'FACEBOOK',
'fa-twitter': socialMediaLink.socialMediaType === 'TWITTER',
'fa-reddit': socialMediaLink.socialMediaType === 'REDDIT',
'fa-pinterest': socialMediaLink.socialMediaType === 'PINTEREST',
'fa-linkedin-square': socialMediaLink.socialMediaType === 'LINKEDIN',
'fa-instagram': socialMediaLink.socialMediaType === 'INSTAGRAM',
'fa-google-plus': socialMediaLink.socialMediaType === 'GOOGLE_PLUS',
'fa-tumblr-square': socialMediaLink.socialMediaType === 'TUMBLR',
'fa-vimeo-square': socialMediaLink.socialMediaType === 'VIMEO',
'fa-vk': socialMediaLink.socialMediaType === 'VKONTAKTE',
'fa-weibo': socialMediaLink.socialMediaType === 'WEIBO',
'fa-renren': socialMediaLink.socialMediaType === 'RENREN',
'fa-odnoklassniki': socialMediaLink.socialMediaType === 'ODNOKLASSNIKI',
'fa-flickr': socialMediaLink.socialMediaType === 'FLICKR'
}"></i>
请参阅此 stackblitz以获取演示。
另一种解决方案是保持fa
绑定ngClass
,并将其条件设置为true
:
<i [title]="socialMediaLink.socialMediaType"
[ngClass]="{
'fa': true,
'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',
...
}"></i>
推荐阅读
- php - 为什么
在 html 文档的正文中,我有这样的内容:
<?=str_replace(' ', '_', $result[0]['something'])?>
这工作得很好。在同一个文档中,我有这个:
<?php if(!empty($result[0]
- c# - 当我添加新用户并尝试在下一行添加声明时,我在正文中引用了错误
- php - 在没有Javascript的情况下在php中显示表单验证错误作为输入占位符的好方法
- swift - Swift 编译器崩溃 - 有人看到了吗?
- node.js - 接受输入到节点进程的最基本、原始、准系统的方法是什么?
- macos - GDB 未知加载命令
- sql - 如何获取SQL Server列中某个单词后的值?
- java - 如何创建数组的 ArrayList
- asp.net-mvc - 基于 MVC 的应用程序出现奇怪的 IIS 403.14 问题
- ember.js - Ember 关系在测试环境中不尊重模型自定义适配器