Angular如何在同一Html元素上使用*ngIf和*ngFor

Question

我有一组记录显示，而不是隐藏，我想使用*ngIf，但如果我写*ngIf它说error不能在同一元素上使用ngIf和ngFor。

<scx-indv-supplier
class="row"
*ngFor="let request of suppliers"
[hidden]="request.status === 'CANCELLED' &&  request.durationDays > 179"
[request]="request"
[requestId]="request.requestId"
>
</scx-indv-supplier>

但是，如果在scx-indv供应商的顶部使用div，并这样写。它引发错误无法读取未定义的属性"status">

<div *ngIf="request.status != 'CANCELLED' &&  request.durationDays > 179">
<scx-indv-supplier
class="row"
*ngFor="let request of suppliers"
[request]="request"
[requestId]="request.requestId"
></scx-indv-supplier>
</div>

Answer 1

答案发布在有关结构指令的官方文件中

有一天你会想重复一个HTML块，但只有当特定条件成立。您将尝试将*ngFor和*ngIf在同一主机元素上。Angular不会让你。一个图元只能应用一个结构指令。

原因很简单。结构指令可以做复杂的事情与宿主元素及其后代一起。当有两个指令时对同一宿主元素的声明，哪一个优先？哪一个应该先去，NgIf还是NgFor？NgIf可以取消效果吗NgFor？如果是这样(而且似乎应该是这样(，应该如何Angular概括了对其他结构进行抵消的能力指令？

这些问题没有简单的答案。禁止多个结构性指令使它们变得毫无意义。有一个简单的解决方案这个用例：将*ngIf放在包装*ngFor元素。一个或两个元素都可以是ng容器，这样就不必引入额外级别的HTML。

Answer 2

你可以在这里使用ng容器标签，就像下面的一样

<ng-container *ngFor="let request of suppliers" >
<div>
<scx-indv-supplier
class="row"
*ngIf="request.status != 'CANCELLED' &&  request.durationDays > 179"
[request]="request"
[requestId]="request.requestId"
></scx-indv-supplier>
</div>
</ng-container>

由于无法引用，您请求循环范围外部的变量

Answer 3

如果我没记错，错误也会"告诉"您解决方案是什么。

在这种情况下，必须使用ng-template包装*ngFor:

<ng-template *ngFor="let request of suppliers"
<scx-indv-supplier
class="row"
[hidden]="request.status === 'CANCELLED' &&  request.durationDays > 179"
[request]="request"
[requestId]="request.requestId"
>
</scx-indv-supplier>
</ng-template>