我明显削减了我的代码。 这是重要的部分。 Angular4。模板。
原始代码:
<div *ngIf="getData(places).length > 0">
<select>
<option *ngFor="let place of getData(places)" [ngValue]="place.placeId">{{place.description}}
</option>
</select>
</div>
您可能会看到getData
函数使用了两次。它第一次用于决定是否显示整个块,因为它可能是空的。这是必须的。
我试图简化它,没有任何错误。我所拥有的相同功能的最短路径是 改进代码:
<div *ngIf="getData(places); let myList">
<div *ngIf="myList.length > 0">
<select>
<option *ngFor="let place of myList" [ngValue]="place.placeId">{{place.description}}
</option>
</select>
</div>
</div>
糟糕的是改进的代码有一个额外的包装器 - 一个额外的div。
是否可以避免这个额外的div?如果第二个ngIf使用第一个ngIf中声明的变量,我不知道是否可以组合这两个* ngIf。