Javascript Can'；在创建的元素上不应用样式

我试图在创建列表元素之前添加项目符号，但即使我添加了一个类而不是使用下面的选择器，也不会应用项目符号。当我点击一个空的UL时，它会创建一些LI作为孩子。我知道这段代码可能很混乱，但到目前为止我还没有找到其他解决方案。我还尝试使用ngFor使其更清晰，但结果不是预期的（参见编辑）

TS

CSS

编辑

在这里，我使用*ngFor，但当我点击它时，每个UL中的子项都是相同的

<ul id="list">
  <li *ngFor="let familly of famillies; let i = index" id="li-{{ familly.id }}">
    <span (click)="getf2(familly.id)">{{ familly.name }}</span>
    <ul id="list2">
      <li
        *ngFor="let familly2 of famillies2; let i = index"
        id="li-{{ familly2.id }}"
      >
        <span (click)="getf3(familly2.id)">{{ familly2.name }}</span>
      </li>
      <ul id="list3">
        <li
          *ngFor="let familly3 of famillies3; let i = index"
          id="li-{{ familly3.id }}"
        >
          <span>{{ familly3.name }}</span>
        </li>
      </ul>
    </ul>
  </li>
</ul>

ngFor的结果是：

使用创建的元素生成结果

---

您不应该在Angular中使用DOM的

createElement

方法。Angular保留了它自己的DOM表示，因此在代码中直接操作DOM会绕过Angular，并使它变得混乱。CSS使用的是过时的属性。对于

转换

，您不需要供应商的PEFIX，而且出于性能原因，您通常不应该使用

所有

作为转换目标-只转换您想要的元素。此外，您不能转换或设置

display

属性的动画。我知道，但在我的情况下，我不能使用*ngFor，因为子类中有许多UL，因此它们有自己的父类，如果我使用了许多*ngFor，它将在每个ULI中添加LI。您的类具有组件前缀。使用

：：ng deep

@leri，但您应该使用

ngFor

-所以您问的这个问题听起来像是。相反，请向我们展示您的

ngFor

问题，而不是这个

createElement

问题。

ul {
  list-style: none;
  cursor: pointer;
}

li:before {
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.9em;
  position: relative;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

<ul id="list">
  <li *ngFor="let familly of famillies; let i = index" id="li-{{ familly.id }}">
    <span (click)="getf2(familly.id)">{{ familly.name }}</span>
    <ul id="list2">
      <li
        *ngFor="let familly2 of famillies2; let i = index"
        id="li-{{ familly2.id }}"
      >
        <span (click)="getf3(familly2.id)">{{ familly2.name }}</span>
      </li>
      <ul id="list3">
        <li
          *ngFor="let familly3 of famillies3; let i = index"
          id="li-{{ familly3.id }}"
        >
          <span>{{ familly3.name }}</span>
        </li>
      </ul>
    </ul>
  </li>
</ul>

 ngOnInit(): void {
    this.getFamillies();
  }

  getFamillies() {
    this.famillyService
      .getFamillies()
      .subscribe((data) => {
        this.famillies = data;
      });
  }

  getf2(id: number) {
   this.famillies2 = this.famillies.find((x) => x.id == id).famillies2;
  }

  getf3(id: number) {
   this.famillies3 = this.famillies2.find((x) => x.id == id).famillies3;
  }