Question

我试图实现与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

有什么建议吗？

Answer 1

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

Here是stackblitz。图像已损坏，但您可以看到实际结果。

<强>更新

也修复了图像问题。

Answer 2

这样写：

<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>

具有模板的PrimeNG SelectButton无法正确显示

2 个答案: