Как использовать привязку данных, чтобы изменить часть строки имени класса на любой код страны ISO?

#css #angular #data-binding

#css #angular #привязка данных

Вопрос:

Я хочу отобразить значок флага страны элемента, используя таблицу стилей flag-icon значок флага. При этом отображается флаг страны, основанный на коде ISO страны, например:

 <span class="flag-icon flag-icon-gr"></span>
  

Отображает греческий флаг (код ISO GR).

Как мне динамически изменять двухсимвольный код ISO? Что-то вроде этого:

 <span class="flag-icon flag-icon-{{un_country}}"></span>
  

Или это:

 <span [className]="'flag-icon flag-icon-{{un_country}}'"></span>
  

Ответ №1:

кажется, class="flag-icon" [ngClass]="'flag-icon-' un_country" должно сработать

Ответ №2:

в comp.html

class="flag-icon" [ngClass]="flagClass"

в comp.ts

this.flagClass='flag-icon-' this.un_country;