为什么我的 class 样式不适用于动态创建的元素？ Angularjs

Question

我的问题很简单；为什么我的 class 样式不适用于动态创建的元素？

我正在这里创建一个搜索栏，我在其中为每个匹配结果生成一个 li，并将其附加到我的 ul。当我检查该页面时，我看到 class 已正确应用于 li，但 class 本身的样式不存在。我硬编码了一个测试 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;
            }
          }
        }
      }
    }
  }

我的学生：

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);
});

Answer 1

the classes are applied to the li's correctly, but the styles from the class itself aren't present

如果你指的是 focusable 和 testing 类，我在你的 SCSS 中没有看到它们。

Answer 2

如果没有看到整个玉米粉蒸肉就很难准确，但通常您应该在 .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>

为什么我的 class 样式不适用于动态创建的元素？ Angularjs

Why don't my class styles apply to dynamically created elements? Angularjs

javascript

css

dom

sass

angularjs