PrimeNG SelectButton with TEMPLATE 无法正确显示答案

【问题标题】：PrimeNG SelectButton with TEMPLATE don't show correctlyPrimeNG SelectButton with TEMPLATE 无法正确显示
【发布时间】：2020-04-29 03:34:06
【问题描述】：

我正在尝试实现类似于 PrimeNG 在他的网站上展示的示例 PrimeNG - SelectButton 在自定义模板部分。我正在尝试复制相同的内容。这是我的代码：

component.ts

metodos: any[];
selectedMetodo;

constructor() {
    this.metodos = [
      { 'name': 'Tarjeta de crédito','flag': 'pse.png' },
      { 'name': 'PSE', 'flag': 'pse.png' },
      { 'name': 'Efectivo', 'flag': 'pse.png'}
    ];
  }

component.html

<p-selectButton [options]="metodos" [(ngModel)]="selectedMetodo">
    <ng-template let-item>
        <img src="assets/img/pagos/{{item.flag}}" />
        <span>{{item.name}}</span>
    </ng-template>
</p-selectButton>

我有这个结果：web result

有什么建议吗？？

【问题讨论】：

标签： javascript angular typescript primeng

【解决方案1】：

写这个：

<p-selectButton [options]="metodos" [(ngModel)]="selectedMetodo" optionLabel="name">
<ng-template let-item>
    <img src="assets/img/pagos/{{item.value.flag}}" />
    <span>{{item.value.name}}</span>
</ng-template>

【讨论】：

欢迎来到stackoverflow。除了您提供的答案之外，请考虑提供一个简短说明，说明为什么以及如何解决此问题。

【解决方案2】：

这是primeng 5.2.0 及以下版本的错误。您必须将您的primeng 版本更新为5.2.7，然后您才能解决此问题。

Here 是堆栈闪电战。图片已损坏，但您可以看到实际效果。

更新

也修复了图像问题。

【讨论】：