带有条件的 Angular 模板 ngIf

Question

我有一个 div，当我的两个条件为空时，我希望它消失，此时它将显示一个空白 div。

<div class="card statOf" *ngIf="selectedState._id">
        <div class="letter" *ngFor="let letter of letters">
            <div class="letter-user" *ngIf="letter.user">
                <span>
                    {{ letter.user }}</span>
                <div *ngIf="dateLastHeart">
                    <span>
                        {{ dateLastHeart }} </span>
                </div>
            </div>
    </div>
</div>

目前，当其中一个为空时，它就像我想要的那样工作，但是当它们都为空时，它显示类卡 statOf，我想在它们都为空时隐藏它，有没有办法做到这一点?

Answer 1

AND 运算符 (... && ...) 怎么样。我可以想象这样的事情（我不确定你在想哪些变量）：

<div class="card statOf" *ngIf="selectedState && selectedState._id && letters && letters.length > 0">
  <div class="letter" *ngFor="let letter of letters">
     <div class="letter-user" *ngIf="letter.user">
        <span>{{ letter.user }}</span>
        <span *ngIf="dateLastHeart"> {{ dateLastHeart }} </span>
     </div>
  </div>
</div>

编辑

您无权访问外部 div 上的“letter.user”，因为它超出了 *ngFor 范围。您可以尝试检查字母数组是否为空。

<div class="card statOf" *ngIf="letters && letters.length > 0 && dateLastHeart">
  <div class="letter" *ngFor="let letter of letters">
     <div class="letter-user" *ngIf="letter.user">
        <span>{{ letter.user }}</span>
        <span>{{ dateLastHeart }} </span>
     </div>
  </div>
</div>

编辑

你说：

我希望它们都为 NULL 时不可见

*ngIf 是一个肯定的表达式，意思是：如果 ..condition.. 显示一些东西。

因此，如果您只想在它们都为 null 时隐藏您的容器，正确的表达式是：

<container *ngIf="variableA || variableB"> ...

这意味着只有在设置了 variableA 或 variableB 时才显示容器