Только один шрифт - потрясающий значок, отображаемый правильно в условиях [ngClass] - PullRequest
Новая
       7

Только один шрифт - потрясающий значок, отображаемый правильно в условиях [ngClass]

0 голосов
/ 20 февраля 2019

Я создаю профиль пользователя, в котором пользователь может отправлять ссылки на свои учетные записи в социальных сетях.Каждая учетная запись представлена ​​с помощью интерактивной ссылки.Какой значок должен быть выбран, определяется несколькими условиями в [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>

Проблема в том, что только последний значок в списке условий отображается правильно, все остальные отображаются какединообразные блоки, например:

enter image description here

И это только потому, что 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';

1 Ответ

0 голосов
/ 20 февраля 2019

В вашей привязке 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>

См. этот стек для демонстрации.

Альтернативное решение - сохранить fa в привязке ngClass и установить для ее условия значение true: 

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