如何在angular 5中显示自定义下拉列表
如何在angular 5中显示自定义下拉列表
提问于 2018-11-22 04:48:15
我正在尝试使用Angular 5中的ng-select在dropdown中显示项目。但我正在设计的dropdown组件本质上应该更通用，这意味着调用我的dropdown的人应该能够通过自定义模板来显示dropdown中的项目。也就是说，dropdown中的项目列表应该是用特定的模板构建的，调用我的generic dropdown应该显示自定义的项目列表。这是可以在移位中实现的吗？目前我使用的是"dropdownVal“，它的数据类型是String[]，但是我需要模板/组件的数组。
我的代码如下
dropdown.component.ts
@Component({
selector: 'wdsk-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
@Input() dropdownVal: string[];
@Input() placeholder: string;
@Output() selectedItem = new EventEmitter();
constructor() { }
ngOnInit() {
}
onSelect(value: any) {
this.selectedItem.emit(value);
}
}模板- dropdown.component.html
<div class="col-md-12 account-dropdown">
<div class="form-group row">
<div class="col-md-12">
<ngx-select tabindex="0" placeholder={{placeholder}} [items]="dropdownVal" (selected)="onSelect($event)">
</ngx-select>
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2018-11-22 05:10:56
我以前使用@ContentChildren和ng- mat-select对Angular Material的模板元素执行过此操作。
dropdown.ts
import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, ContentChildren, QueryList , TemplateRef} from '@angular/core';
import { MatSelectChange, MatSelect } from '@angular/material/select';
// Template Sections
@Component({
selector: 'custom-dropdown-item',
template: '<ng-template #content><ng-content></ng-content></ng-template>'
})
export class CustomDropdownItemsComponent {
@ViewChild('content') content: any;
@Input() value: any;
@Input() width: string;
@Input() height: string;
@Output() click: EventEmitter<any> = new EventEmitter();
onClick() {
this.click.emit(this.value);
}
}
@Component({
selector: 'custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
@ViewChild('matSelect') matSelect: MatSelect;
@Output() valueChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
@Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() value: any;
@Input() items: string[];
@Input() placeholder: string;
@Input() dropdownTitle: string;
@Input() addDynamicContent: boolean = false;
@Input() compareWith: Function;
defaultCompareWithFn: Function = function () { };
selectedIndex = -1;
@ContentChildren(CustomDropdownItemsComponent)
ddItems:QueryList<CustomDropdownItemsComponent>;
constructor() { }
ngOnInit() {
}
valueChanged(event: MatSelectChange) {
this.valueChange.emit(event.value);
}
}dropdown.html
<mat-select #matSelect [(value)]="value" (selectionChange)="valueChanged($event)">
<mat-option style="width:100px" [value]="0">
<h1 style="color:red">I'm content = 0</h1>
</mat-option>
<mat-option [style.width]="ddlItem.width" [value]="i+1" *ngFor="let ddlItem of ddItems; let i = index">
<ng-container [ngTemplateOutlet]="ddlItem.content"></ng-container>
</mat-option>
</mat-select>传入自定义项：
<div class="mat-app-background basic-container" style="width:200px; padding:0; margin:0">
<custom-dropdown [addDynamicContent]="true" [(value)]="selected">
<custom-dropdown-item width="100px">
<span style="color:green">I'm dynamic content = 1</span>
</custom-dropdown-item>
<custom-dropdown-item width="100px">
<p style="color:blue">I'm dynamic content = 2</p>
</custom-dropdown-item>
</custom-dropdown>
</div>
<div>
Selected: {{ selected }}
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53420246
复制相关文章
相似问题
腾讯云开发者
