我的問題很簡單；為什么我的類樣式不適用于動態創建的元素？
我在這里創建一個搜索欄，在其中為每個匹配結果生成一個 li，并將其附加到我的 ul 中。當我檢查頁面時，我看到類已正確應用于 li，但類本身的樣式不存在。我硬編碼了一個測驗 li，它具有預期的樣式。為了將我的樣式應用于這些動態生成的元素，我在這里缺少什么？當然，我不必為我的打字稿中的 li 指定每種樣式嗎？任何解釋都會很可愛，謝謝大家！（：
我的 HTML：
<div class="section">
<h2>Step 1: Choose an Identity Provider (IDP)</h2>
<div class="search">
<input
class="focusable"
(focusout)="handleFocusOut()"
(input)="debounce(search, 300, $event)"
placeholder="Select Identity Provider"
autocomplete="off"
/>
<i class="icon fas fa-search"></i>
<ul id="search-options">
<li class="focusable testing">IMG Salesforce</li>
</ul>
</div>
<!-- <i class="fa fa-plus"></i>-->
</div>
我的scss：
.section {
...
.search {
position: relative;
width: 300px;
.icon {
position: absolute;
right: 5px;
top: 3px;
}
input {
width: 300px;
}
ul {
color: red;
li {
cursor: pointer;
&:hover {
background-color: grey;
color: red;
}
.testing {
cursor: pointer;
&:hover {
background-color: grey;
color: red;
}
}
}
}
}
}
我的TS：
let ul = document.getElementById('search-options');
this.displayServices.forEach((service) => {
let li = document.createElement('li');
li.classList.add('focusable', 'testing');
li.addEventListener('focusout', this.handleFocusOut);
const img = document.createElement('img');
img.src = this.getImgUrl(service);
img.width = 20;
img.height = 20;
img.style.margin = '0 10px';
li.innerHTML = `${service.name}`;
li.style.display = 'flex';
li.style.alignItems = 'center';
li.style.border = '.5px solid black';
li.style.padding = '8px 0';
li.prepend(img);
ul.appendChild(li);
});
uj5u.com熱心網友回復：
沒有看到整個 tamale 就很難精確，但通常您應該在 .TS 檔案中獲取資料并將該資料直接發送到視圖。您的視圖應該動態創建這些元素。此處的答案中未顯示的是您添加到影像和 LI 標記的行內樣式 - 只需在 CSS 中執行。
像這樣的東西：
TS：
this.someService.getData.subscribe(displayServices => {
this.displayServices = displayServices;
})
HTML：
<div class="section">
<h2>Step 1: Choose an Identity Provider (IDP)</h2>
<div class="search">
<input
class="focusable"
(focusout)="handleFocusOut($event)"
(input)="debounce(search, 300, $event)"
placeholder="Select Identity Provider"
autocomplete="off" />
<i class="icon fas fa-search"></i>
<ul id="search-options">
<li *ngFor="service in displayServices"
class="focusable testing"
(focusout)="handleFocusOut($event)">
<img [src]="getImgUrl(service)" />
{{service.name}}</li>
</ul>
</div>
<!-- <i class="fa fa-plus"></i>-->
</div>
uj5u.com熱心網友回復：
類正確地應用于 li，但類本身的樣式不存在
如果你的意思是focusable和testing類，我在你的 SCSS 中看不到它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/464217.html
標籤：javascript css angularjs dom 粗鲁的
上一篇：角墊無線電組選擇索引