如何绑定国旗跨度html元素使用flag-icon-css动态使用它答案

【问题标题】：how to bind a country flag span html element use it dynamically using flag-icon-css如何绑定国旗跨度html元素使用flag-icon-css动态使用它
【发布时间】：2019-10-10 15:42:00
【问题描述】：

我已经在我的应用程序中安装了 flag-icon-css 库，我想根据我的组件上设置的国家绑定变量显示国家标志。我怎样才能做到这一点？

@Component({
    selector: 'app-select-operator',
    templateUrl: './select-operator.component.html',
    styleUrls: ['./select-operator.component.css']
})

export class SelectOperatorComponent implements OnInit {

    country: string = 'fr';
    constructor() { }

    ngOnInit() {

    }

}

如何将值国家/地区传递给我的模板。我的 select-operator.component.html 模板如下。

我可以将 fr 替换为 country 字段吗？

 <div>
    <div>Country: </div>
    <span class="flag-icon flag-icon-**fr**"></span>
 </div>

【问题讨论】：

你试过答案了吗？有什么问题吗？

标签： css angular

【解决方案1】：

你可以试试：

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

【讨论】：

【解决方案2】：

试试这样：

<span [class]="'flag-icon  flag-icon-' +  country "></span>

【讨论】：