带图像的 PrimeNG 下拉菜单答案

【问题标题】：PrimeNG dropdown with image带图像的 PrimeNG 下拉菜单
【发布时间】：2021-03-02 00:21:49
【问题描述】：

我正在尝试使用选项标签前的图像来实现 PrimeNG 的下拉菜单，但图像未显示。

在 .ts 文件中，我有如下选项数组：

langOptions = [
        {label: 'hungarian', value: 'hu', imgSrc: './assets/img/flags/flag_hu.svg'},
        {label: 'english', value: 'en', imgSrc: './assets/img/flags/flag_en.svg'} 
    ];

在模板中：

<form [formGroup]="langChangeForm">
  <p-dropdown [options]="langOptions" optionLabel="label" (change)="onChange($event.target.value)">
    <ng-template let-country pTemplate="item">
      <div>
        <img [src]="country.imgSrc" />
        <div>{{country.label | lang}}</div>
      </div>
    </ng-template>
   </p-dropdown>
</form>

也试过<img src="{{country.imgSrc}}" />，没有成功... 如果我将属性绑定[src]="country.imgSrc" 替换为src="./assets/img/flags/flag_en.svg"，则图像会加载。

知道如何进行这项工作吗？谢谢！

【问题讨论】：

我没有重现您的问题：demo。您使用哪个 PrimeNG 版本？
^10.0.0-rc.3。感谢您的努力，但我找到了一个完全可以接受的解决方法，我会尽快发布。

标签： angular primeng primeng-dropdowns

【解决方案1】：

我想出了一个解决方法

component.ts：

interface LangOption {
    label: string;
    value:string;
}

@Component({
    selector: 'app-language-selector',
    templateUrl: './language-selector.component.html',
    styleUrls: ['./language-selector.component.css']
})
export class LanguageSelectorComponent implements OnInit {
    langChangeForm: FormGroup;
    selectedLang: LangOption;
    flagHu: string = './assets/img/flags/flag_hu.svg';
    flagEn: string = './assets/img/flags/flag_en.svg';
    langOptions: LangOption[] = [
        {label: 'magyar', value: 'hu'},
        {label: 'english', value: 'en'}  
    ];

    ngOnInit() { 
        this.initializeLangChangeForm();
    }

    initializeLangChangeForm() {
        this.langChangeForm = new FormGroup({
            'lang': new FormControl(this.selectedLang),
        });
    }
...
}

component.html：

<form [formGroup]="langChangeForm">
  <p-dropdown
    [options]="langOptions" 
    optionLabel="label" 
    optionValue="value" 
    formControlName="lang"
    styleClass="lang-change-dropdown"
    (onChange)="onChange()">
    <ng-template pTemplate="selectedItem">
        <div class="flex-row"  *ngIf="selectedLang">
          <img class="lang-change-img" [src]="selectedLang.label == 'magyar' ? flagHu : flagEn" alt="">
            <div class="lang-change-option-text selected-lang center">{{selectedLang.label}}</div>
        </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
        <div class="flex-row">
          <img class="lang-change-img" [src]="country.label == 'magyar' ? flagHu : flagEn" alt="">
          <div class="lang-change-option-text center">{{country.label}}</div>
        </div>
    </ng-template>
  </p-dropdown>
</form>

如果我有两个以上的选项就不行了，但在这种情况下它工作得很好。我厌倦了尝试从 PrimeNG 网站获取示例..

【讨论】：