Question

此问题已经有答案，但与之无关。以下代码是我的代码

<tr>
    <th *ngFor="let col of header" *ngIf='col.name!="Parent"'>
       {{col.value}}
    </th>
</tr>

我正在使用ngFor创建标题，如果col.name具有特定值，我想跳过

我们可以使用以下命令跳过，但是正在创建空标题

    <th *ngFor="let col of header" >
        <span *ngIf='col.name!="Parent"'>
            {{col.value}}
        </span>
    </th>

如果我正在使用ng-template创建标题，则不会显示。如何解决此问题

Answer 1

您可以在tr标签后使用ng-container

<tr>
   <ng-container *ngFor="let col of header">
      <th  *ngIf='col.name!="Parent"'>
        {{col.value}}
      </th>
   </ng-container>
</tr>

Answer 2

您可以尝试ng-container。这是它的文档。 link

 <ng-container *ngFor="let col of header" >
      <th *ngIf='col.name!="Parent"' >
            <span>
                {{col.value}}
            </span>
        </th>
 </ng-container>

Answer 3

我认为该要求需要在循环之前过滤您的数组。如果条件不匹配，您的代码仍将创建一个th元素。实现此目的的一种方法是创建一个自定义管道，该管道将过滤您的标头。像这样：

@Pipe({
  name: 'filterPipe'
})
export class FilterPipePipe implements PipeTransform {
  transform(value: any[], filterString: string): any {
    return value.filter(elem => elem.name != filterString);
  }
}

HTML

<th *ngFor="let col of header | filterPipe: 'Parent'" >
    <span>
        {{col.value}}
    </span>
</th>

或者另一个选择可能是使用ng-container进行循环

<ng-container *ngFor="let col of header" >
    <th *ngIf='col.name!="Parent"'>
        <span>
            {{col.value}}
        </span>
    </th>
</ng-container>

ng-container本身未在DOM中呈现，而是在ng-container中呈现的元素，当ngIf条件不满足要求时，您的th将被呈现跳过了。

Answer 4

您想要这样的东西，每个元素只能有一个结构指令：

<ng-container *ngFor="let col of header">
    <th *ngIf='col.name!="Parent"' >
        {{col.value}}
    </th>
</ng-container>

如何在角度6中创建两个结构指令？

4 个答案: