英文:
Angular material select dropdown with fixed last element
问题
我目前正在使用Angular Material的select进行工作。
不幸的是，我还没有找到一个实现方式，可以将一个元素固定在列表底部，就像下面的例子一样：
https://jsfiddle.net/vyLk778k/
另外，我不能使用Bootstrap，所以基本上只能使用Angular Material的方法。所以列表项是可滚动的，除了最后一个始终可见且固定在列表末尾。以下是我目前的代码：
<mat-form-field appearance="outline">
<mat-label>{{ 'Please select one' }}</mat-label>
<mat-select formControlName="userSelection">
<span *ngFor="let item of user.usersAvailable">
<mat-option [value]="item.userName" style="min-height: 67px; padding: 0px 15px; line-height: 1em;">
<div class="row">
<div class="col-12">
<div class="p-0">
{{item.userName}}
</div>
</div>
<div class="col-12">
<div class="p-0">
{{item.userCountry}}
</div>
</div>
</div>
</mat-option>
</span>
<!-- 这是我需要固定的元素 -->
<mat-option>
{{ 'Create new user' }}
</mat-option>
<!-- 结束需要固定的元素 -->
</mat-select>
<mat-error>
<ag-show-errors [control]="usersForm.controls.userSelection"></ag-show-errors>
</mat-error>
</mat-form-field>
我希望能够将选择下拉列表的最后一个元素固定住。
英文:
I'm currently working with Angular Material select.
Unfortunately I haven't found an implementation that allows me to fix an element on the bottom of the list as follows example:
https://jsfiddle.net/vyLk778k/
Also, I can't use bootstrap so basically the approach must be with angular material.
So the list items are scrollable except the last one which always should be visible and fixed at the end of the list. Here's what I got so far:
<mat-form-field appearance="outline">
<mat-label>{{ 'Please select one' }}</mat-label>
<mat-select formControlName="userSelection">
<span *ngFor="let item of user.usersAvailable">
<mat-option [value]="item.userName"
style="min-height: 67px; padding: 0px 15px; line-height: 1em;">
<div class="row">
<div class="col-12">
<div class="p-0">
{{item.userName}}
</div>
</div>
<div class="col-12">
<div class="p-0">
{{item.userCountry}}
</div>
</div>
</div>
</mat-option>
</span>
<!-- This is the element I need to be fixed -->
<mat-option>
{{ 'Create new user' }}
</mat-option>
<!-- End element I need to be fixed -->
</mat-select>
<mat-error>
<ag-show-errors [control]="usersForm.controls.userSelection">
</ag-show-errors>
</mat-error>
</mat-form-field>
I'm expecting to get the last element of the select dropdown fixed.
答案1
得分: 0
请将以下内容翻译为中文：
添加类似以下样式的 SCSS 样式：
/* 将以下内容添加到组件的 CSS/SCSS 文件中 */
::ng-deep .mat-select-panel .mat-option:last-child {
position: sticky;
bottom: 0;
background-color: white;
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-weight: bold;
}
然后更新你的 HTML 如下：
<mat-form-field appearance="outline">
<mat-label>{{ 'Please select one' }}</mat-label>
<mat-select formControlName="userSelection">
<span *ngFor="let item of user.usersAvailable">
<mat-option [value]="item.userName"
style="min-height: 67px; padding: 0px 15px; line-height: 1em;">
<!-- 在此处添加你现有的选项内容 -->
</mat-option>
</span>
<!-- 这是我需要修复的元素 -->
<mat-option>
{{ 'Create new user' }}
</mat-option>
<!-- 结束我需要修复的元素 -->
</mat-select>
<mat-error>
<ag-show-errors [control]="usersForm.controls.userSelection">
</ag-show-errors>
</mat-error>
</mat-form-field>
希望这对你有用！
英文:
add scss style like this one :
/* Add this to your component's CSS/SCSS file */
::ng-deep .mat-select-panel .mat-option:last-child {
position: sticky;
bottom: 0;
background-color: white;
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-weight: bold;
}
then update your HTML to be :
<mat-form-field appearance="outline">
<mat-label>{{ 'Please select one' }}</mat-label>
<mat-select formControlName="userSelection">
<span *ngFor="let item of user.usersAvailable">
<mat-option [value]="item.userName"
style="min-height: 67px; padding: 0px 15px; line-height: 1em;">
<!-- Your existing option content here -->
</mat-option>
</span>
<!-- This is the element I need to be fixed -->
<mat-option>
{{ 'Create new user' }}
</mat-option>
<!-- End element I need to be fixed -->
</mat-select>
<mat-error>
<ag-show-errors [control]="usersForm.controls.userSelection">
</ag-show-errors>
</mat-error>
</mat-form-field>
I hope this works for you!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论