css - 如何绑定(bind)国家标志跨度 html 元素使用 flag-icon-css 动态使用它

Question

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

@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 吗？

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

Answer 1

你可以试试:

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