[英]mat-slider - Angular Material experimental - _getHostElement error. How to resolve?
我最近升級到 Angular 12 並安裝了 Angular Material Experimental 以試用新的 mat-slider。 我實際上想要一個范圍 slider,它在當前 angular 材料 package 中不可用,我更願意留在 Angular 材料生態系統中。
從以下討論中可以看出為什么我決定在材料實驗https://github.com/angular/components/issues/1331中嘗試新的 mat-slider
代碼:
模塊:
import { MatSliderModule } from '@angular/material-experimental/mdc-slider';
與適當的進口等
HTML: <mat-slider discrete markers thumbLabel [min]="0" [max]="100" [step]="5" values="[10,20]"></mat-slider>
GUI:我得到以下視覺效果 - 只是 slider img的后欄
錯誤: 控制台錯誤:
main.js:1 ERROR TypeError: Cannot read property '_getHostElement' of undefined
at me.value (main.js:1)
at Object.Lt.setThumbStyleProperty (main.js:1)
at main.js:1
at main.js:1
at ae.<computed> (polyfills.js:1)
at X.invokeTask (polyfills.js:1)
at Object.onInvokeTask (main.js:1)
at X.invokeTask (polyfills.js:1)
at X.runTask (polyfills.js:1)
at X.invokeTask (polyfills.js:1)
正常 Angular 材料墊滑塊不是開始工作的問題。
有什么明顯的東西讓我缺少_getHostElement
錯誤嗎? 也許要導入另一個模塊? 我似乎無法在實驗中找到與 Mat-Slider 的此錯誤相關的任何內容。
我可以確認使用最基本的實驗墊滑塊我也看到了同樣的錯誤。 我成功地使用了其他實驗控件,只是 slider 拒絕正確渲染。 這種情況已經有一段時間了,並不是一個新問題。
我遇到了同樣的問題。 顯然,自從您提出這個問題以來,他們已經更新了代碼,因為他們現在在控制台中給您一個提示:
Valid configurations are as follows:
<mat-slider>
<input matSliderStartThumb>
<input matSliderEndThumb>
</mat-slider>
您可能應該使用雙范圍 slider CSS 定制,因為 Angular 材料有時會出現問題,試試這個:
HTML
<div class="range_container">
<div class="sliders_control">
<input id="fromSlider" type="range" value="10" min="0" max="100"/>
<input id="toSlider" type="range" value="40" min="0" max="100"/>
</div>
<div class="form_control">
<div class="form_control_container">
<div class="form_control_container__time">Min</div>
<input class="form_control_container__time__input" type="number" id="fromInput" value="10" min="0" max="100"/>
</div>
<div class="form_control_container">
<div class="form_control_container__time">Max</div>
<input class="form_control_container__time__input" type="number" id="toInput" value="40" min="0" max="100"/>
</div>
</div>
</div>
CSS:
.range_container {
display: flex;
flex-direction: column;
width: 80%;
margin: 35% auto;
}
.sliders_control {
position: relative;
min-height: 50px;
}
.form_control {
position: relative;
display: flex;
justify-content: space-between;
font-size: 24px;
color: #635a5a;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb:hover {
background: #f7f7f7;
}
input[type=range]::-webkit-slider-thumb:active {
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}
input[type="number"] {
color: #8a8383;
width: 50px;
height: 30px;
font-size: 20px;
border: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 2px;
width: 100%;
position: absolute;
background-color: #C6C6C6;
pointer-events: none;
}
#fromSlider {
height: 0;
z-index: 1;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.