为什么我的类样式不适用于动态创建的元素？Angularjs的-解网

问：

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

我在这里创建了一个搜索栏，我在其中为每个匹配结果生成一个 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);
});

javascript css angularjs dom sass

1. 这是 angular，而不是 angularJS 和 2.你为什么要这样操纵 DOM？Angular 有许多内置的方法来做你想做的事情——你应该使用它们，以便你的影子 DOM 保持最新状态。3. Angular 通常会为 CSS 类创建自定义的 className。您的 SCSS 和 HTML 可能会在元素上显示一个“可聚焦”类，但当它呈现时，它可能是 .如果你像现在这样手动创建元素（Angular 的禁忌），你就无法利用该功能。ng_focusable_1234

答：

0赞 rajniszp 4/24/2022 #1

这些类正确地应用于 LI，但类本身的样式不存在

如果你的意思是 and 类，我在你的 SCSS 中看不到它们。focusabletesting

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

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

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

评论

评论

评论