时间戳

首页 > 解决方案 > 角？在 ngIf 之后

angular - 角？在 ngIf 之后

问题描述

我正在尝试执行以下操作：

<div *ngIf="(observable$ | async) as results?.length > 0"> <-- here is the error
  <span *ngFor="let result of results>{{result}}</span>"

<div>即只有在结果可用并且有超过 1 个结果时才绘制这个

第一行<div>导致错误。存在两个<div>s 解决方案：

<div *ngIf="(observable$ | async) as results">
  <div *ngIf="results?.length > 0">
    <span *ngFor="let result of results>{{result}}</span>"

可以在<div>不添加另一个容器的情况下一次性完成吗？

标签： angular

解决方案

?不能与asin*ngIf语句一起使用。你能做的最好的就是(observable$ | async)?.length > 0。

此外，当您不需要div在 HTML 中呈现的两个嵌套 s （或任何与此相关的，但您仍然需要*ngIf / *ngFor）时，您可以使用<ng-container>不会呈现为 HTML 元素的 an：

<ng-container *ngIf="(observable$ | async) as results">
  <div *ngIf="results?.length > 0">
    <span *ngFor="let result of results>{{result}}</span>

如果您在迭代之前尝试检查一个元素是否不为空，那么您实际上不需要显式检查它，因为*ngFor它将优雅地处理空数组/列表。因此，您应该能够将模板简化为：

<ng-container *ngIf="(observable$ | async) as results">
  <span *ngFor="let result of results>{{result}}</span>

甚至更进一步：

<div *ngFor="let item of observable$ | async">{{result}}</div>

推荐阅读