是否可以同时使用 mat-select 和 mat-chips? [英] Is it possible to use mat-select and mat-chips together?
本文介绍了是否可以同时使用 mat-select 和 mat-chips?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否可以混合"mat-select
和 mat-chip-list
.在 chip-list
中,我想显示从 mat-select
中选择的选项.
如果是,我该怎么做?
解决方案
是的,这是可能的.您需要在
中使用
.在
中放置
.
在您的 HTML 模板中,您需要如下内容:
<mat-label>Toppings</mat-label><mat-select [formControl]="toppingsControl" 多个><mat-select-trigger><mat-chip-list><mat-chip *ngFor="let topping of toppingsControl.value"[removable]="true" (removed)="onToppingRemoved(topping)">{{ 配料 }}<mat-icon matChipRemove>取消</mat-icon></mat-chip></mat-chip-list></mat-select-trigger><mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option></mat-select></mat-form-field><br/><!-- 仅用于调试-->{{ 配料控制.value |json }}
在你的 ts
中:
@Component({选择器:'选择多个示例',templateUrl: 'select-multiple-example.html',styleUrls: ['select-multiple-example.css'],})导出类 SelectMultipleExample {顶部控件 = 新表单控件([]);顶部列表:字符串[] = ['额外的奶酪','蘑菇','洋葱','意大利辣香肠','香肠','番茄'];onToppingRemoved(顶部:字符串){const toppings = this.toppingsControl.value as string[];this.removeFirst(浇头,浇头);this.toppingsControl.setValue(浇头);//触发变化检测}private removeFirst(array: T[], toRemove: T): void {const index = array.indexOf(toRemove);如果(索引!== -1){array.splice(index, 1);}}}
I wanna know if it's possible have a "mix" of mat-select
and mat-chip-list
. In the chip-list
, I want to show the selected options from mat-select
.
If it is, how can I do it?
解决方案
Yes, it is possible. You need to use <mat-select-trigger>
within <mat-select>
. Inside <mat-select-trigger>
place <mat-chip-list>
.
In your HTML template you need something like:
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppingsControl" multiple>
<mat-select-trigger>
<mat-chip-list>
<mat-chip *ngFor="let topping of toppingsControl.value"
[removable]="true" (removed)="onToppingRemoved(topping)">
{{ topping }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</mat-select-trigger>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
<br/> <!-- only for debug -->
{{ toppingsControl.value | json }}
And in your ts
:
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
toppingsControl = new FormControl([]);
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
onToppingRemoved(topping: string) {
const toppings = this.toppingsControl.value as string[];
this.removeFirst(toppings, topping);
this.toppingsControl.setValue(toppings); // To trigger change detection
}
private removeFirst<T>(array: T[], toRemove: T): void {
const index = array.indexOf(toRemove);
if (index !== -1) {
array.splice(index, 1);
}
}
}
Here is a complete example with Angular Material 9, but it works the same in version 6.
I hope this helps!
这篇关于是否可以同时使用 mat-select 和 mat-chips?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文