使用 [ngClass] 条件只能正确显示一种字体真棒图标

Question

我正在建立一个用户个人资料，用户可以在其中提交 link 到他或她的社交媒体帐户。每个帐户都用可点击的 link 表示。选择哪个图标由[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 class

初始化列表的方式

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

Answer 1

在您的 ngClass 绑定中，如果条件是 true，它会设置 fa class。但是，下面的条件，也就是false，去掉它。这就是为什么仅当最后一个条件为 true.

时才保留 fa class

您应该在条件 ngClass 绑定之外设置公共 class fa：

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

有关演示，请参阅 this stackblitz。

另一种解决方案是将 fa 保留在 ngClass 绑定中，并将其条件设置为 true:

<i [title]="socialMediaLink.socialMediaType" 
  [ngClass]="{
    'fa': true,
    'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',
    ...
  }"></i>

Answer 2

我尝试了@ConnorsFun 的上述方法，不幸的是它对我不起作用。这是我针对上述两种方法的代码（使用字体 awesome 5，其中前缀 'fa' 已更改为 'fas）：

<i class='fas' [ngClass]="{'fa-plus': filterCategories[0]['collapse'], 'fa-minus': !filterCategories[0]['collapse']}"></i> {{filterCategories[0]['name']}}

<i [ngClass]="{'fas': true, 'fa-plus': filterCategories[0]['collapse'], 'fa-minus': !filterCategories[0]['collapse']}"></i> {{filterCategories[0]['name']}}

代码应该将图标从 fa-minus（当 filterCategories[0]['collapse'] 的值为 false 时）更改为 fa-plus（当 filterCategories[0]['collapse'] 的值为 true 时），但图标仍然存在无论 filterCategories[0]['collapse'] 值如何，卡在 fa-minus。

我使用的替代方法是让多个元素带有 ngIf 语句。例如：

<span *ngIf="socialMediaLink.socialMediaType === 'YOUTUBE'><i class= 'fas fa-youtube'></span>
<span *ngIf="socialMediaLink.socialMediaType === FACEBOOK><i class= 'fas fa-facebook-official'></span>

等等……

尽管这种方法效果很好，但如果可以的话，我个人更喜欢@ConnonrsFan 的上述回复。

使用 [ngClass] 条件只能正确显示一种字体真棒图标

Only one font awesome icon displaying correctly using [ngClass] conditions

typescript

ng-class

angular