javascript - 无法使用 Angular 6 删除空标签

Question

这里我有一个问题，下面是我的 json 数据

 data = {
  "required": false,
  "name": "data",
  "details": [
    {
      "name": "type",
      "details": {
        "visible": false,

      }
    },
    {
      "name": "Creation",
      "details": {

        "visible":true,

      }
    },
    {
      "name": "Creation",
      "details": {

        "visible": false,

      }
    },

    {
      "name": "Modification",
      "details": {

        "visible": true,

      }
    }

  ]
}

.html代码

<ng-container *ngFor="let x of data.details">
  <ul>
  <li *ngIf="x.details.visible">             
      {{x.name}}
  </li>
  </ul>
</ng-container>

这里的问题是，即使我的条件在这里是真的，它正在创建空标签，我的 html 样式受到干扰并获得不需要的空格

在控制台中它是这样显示的

<ul _ngcontent-c76=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--></ul>

<ul _ngcontent-c76=""><!--bindings={
  "ng-reflect-ng-if": "true"
}--><li _ngcontent-c76=""> Creation </li></ul>

<ul _ngcontent-c76=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--></ul>

<ul _ngcontent-c76=""><!--bindings={
  "ng-reflect-ng-if": "true"
}--><li _ngcontent-c76=""> Modification</li></ul>

我怎样才能删除那些空白区域。

下面是我的堆栈 Blitz URL。

https://stackblitz.com/edit/angular-yw2zy5

Answer 1

您的实现问题:

1. 您在 ul 而不是 li 上有 *ngFor。这使得 ul 在 DOM 上重复出现，从而破坏了您的风格。
2. 您应该使用 ng-container 作为 li 的父级，而不是将其用作 ul 的父级。这样，您就可以在 li 上添加 *ngIf 条件，同时在 ng-container< 上使用 *ngFor/。

试一试:

<hello name="{{ name }}"></hello>
<ul>
    <ng-container *ngFor="let x of data.details">
        <li *ngIf="x.details.visible">
            {{x.name}}
        </li>
    </ng-container>
</ul>

---

这是一个 Sample StackBlitz供您引用。