NgPrime p-dropdown Template具有模板、过滤和清除图标的高级功能-使用表单元素包装时可折叠
NgPrime p-dropdown Template具有模板、过滤和清除图标的高级功能-使用表单元素包装时可折叠
提问于 2021-09-14 11:28:15
https://stackblitz.com/edit/primeng-dropdown-demo?file=src%2Fapp%2Fapp.component.html
当我将以下代码包装在
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name"
[showClear]="true" placeholder="Select a Country">
<ng-template pTemplate="selectedItem">
<div class="country-item country-item-value" *ngIf="selectedCountry">
<div>{{selectedCountry.name}}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="country-item">
<div>{{country.name}}</div>
</div>
</ng-template>
</p-dropdown>
回答 1
Stack Overflow用户
发布于 2021-09-14 15:25:29
首先，使用Reactive forms代替ngModel
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
country: this.fb.control('')
});
}模板：
<form ngForm="form">
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<p-dropdown [options]="countries" [formControlName]="country" optionLabel="name" [filter]="true" filterBy="name"
[showClear]="true" placeholder="Select a Country">
<ng-template pTemplate="selectedItem" let-item>
<div class="country-item country-item-value">
<div>{{item.name}}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="country-item">
<div>{{country.name}}</div>
</div>
</ng-template>
</p-dropdown>
</form>第二条:不要在pTemplate中使用*ngIf (实际上这是折叠标签的主要问题)，请注意：
- 在
pTemplate中使用formControlName而不是ngModel - use
let-item来获取对选定项的引用 - 不要忘记将
ReactiveFormsModule添加到导入
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69176916
复制相关文章
相似问题
腾讯云开发者
