【问题标题】：Binding with ngIf使用 ngIf 绑定
【发布时间】：2019-02-19 08:04:05
【问题描述】：

我正在尝试根据 *ngIf 中提到的条件绑定值。当我在 *ngIf 中尝试 && 运算符时，它的工作原理很神秘。

代码

       <div *ngIf="days.sunday == true">
          <p class="circle ml-3">Sun</p>
        </div>
        <div *ngIf="days.monday == true">
          <p class="circle ml-2">Mon</p>
        </div>
        <div *ngIf="days.tuesday == true">
          <p class="circle ml-2">Tue</p>
        </div>
        <div *ngIf="days.wednesday == true">
          <p class="circle ml-2">Wed</p>
        </div>
        <div *ngIf="days.thursday == true">
          <p class="circle ml-2">Thu</p>
        </div>
        <div *ngIf="days.friday == true">
          <p class="circle ml-2">Fri</p>
        </div>
        <div *ngIf="days.saturday == true">
          <p class="circle ml-2">Sat</p>
        </div>

上述条件工作正常。我可以相应地打印这些值。

   <div *ngIf="days.sunday == true && days.monday == true  && days.tuesday  == true && days.wednesday  == true && 
   days.thursday  == true && days.friday == true &&  days.saturday == true">
            <p class="circle ml-2">Everyday</p>
                </div>

根据上述条件，如果所有条件都为真，我正在尝试打印 Everyday，但我正在打印 sun mon tue wed thu fri sat Everyday

【问题讨论】：

那怎么了？如果一切都是true，那么每个单独的检查也必须评估为true。
如果所有条件都为真，如何打印Everything。我正在使用 && 运算符，但仍然
用你的代码做一个简单的演示：stackblitz.com
发布您的 component.ts 代码

标签： angular typescript

【解决方案1】：

使用 If/Else 模板

检查所有日期是否为真。然后你只打印每天
Else根据情况打印其他日期

<!-- If block for "Everyday" -->
<div *ngIf="days.sunday && days.monday && days.tuesday && days.wednesday && 
   days.thursday && days.friday && days.saturday; else elseBlock">
    <p class=" circle ml-2 ">Everyday</p>
</div>

<!-- Else block for other days "Sun, Mon, etc..." -->
<ng-template #elseBlock>
    <div *ngIf="days.sunday">
        <p class="circle ml-3">Sun</p>
    </div>
    <div *ngIf="days.monday">
        <p class="circle ml-2">Mon</p>
    </div>
    <div *ngIf="days.tuesday">
        <p class="circle ml-2">Tue</p>
    </div>
    <div *ngIf="days.wednesday">
        <p class="circle ml-2">Wed</p>
    </div>
    <div *ngIf="days.thursday">
        <p class="circle ml-2">Thu</p>
    </div>
    <div *ngIf="days.friday">
        <p class="circle ml-2">Fri</p>
    </div>
    <div *ngIf="days.saturday">
        <p class="circle ml-2">Sat</p>
    </div>
</ng-template>

注意

days.sunday === true 等价于 days.sunday，因为它是一个布尔值

【讨论】：

【解决方案2】：

对于给定的条件，你必须对每一天做同样的事情，就像你在每天所做的那样。

<div *ngIf="days.sunday == true && days.monday == false && days.tuesday == false &&
days.wednesday == false && days.thursday == false && days.friday == false &&
days.saturday == false">
  <p class="circle ml-3">Sun</p>
</div>
...

【讨论】：

【解决方案3】：

*ngIf 不会自动带有“else”。因此，如果每个条件都为真，那么它将进入每个分支。

如果你不希望这样，那么你需要重写你的条件。

这种行为对于 *ngIf 和 Angular 来说并不特殊。

【讨论】：

【解决方案4】：

如果我对您的理解正确，您想要显示评估为 true 的日期，或者如果所有内容都是 true，则显示“每天”。

在您的组件中：

everyday = this.days.sunday === true && this.days.monday === true && 
    this.days.tuesday === true && this.days.wednesday === true && 
    this.days.thursday === true && this.days.friday === true && this.days.saturday === true;

那么在你看来：

<div *ngIf="days.sunday === true && everyday === false">
   <p class="circle ml-3">Sun</p>
</div>
... etc.
<div *ngIf="everday === true">
   <p class="circle ml-3">Every day</p>
</div>

【讨论】：

【解决方案5】：

下面的代码应该可以工作

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  days = { sunday: true, monday: true, tuesday: true, wednesday: true, thursday: true, friday: true, saturday: true };

  isEveryDay() {
    let everyday = true;
    for (let key in this.days) {
      let value = this.days[key];
      if (!value) {
        everyday = false;
        break;
      }
    }
    return everyday;
  }
}

<hello name="{{ name }}"></hello>
<div *ngIf="!isEveryDay()">
    <div *ngIf="days.sunday == true">
        <p class="circle ml-3">Sun</p>
    </div>
    <div *ngIf="days.monday == true">
        <p class="circle ml-2">Mon</p>
    </div>
    <div *ngIf="days.tuesday == true">
        <p class="circle ml-2">Tue</p>
    </div>
    <div *ngIf="days.wednesday == true">
        <p class="circle ml-2">Wed</p>
    </div>
    <div *ngIf="days.thursday == true">
        <p class="circle ml-2">Thu</p>
    </div>
    <div *ngIf="days.friday == true">
        <p class="circle ml-2">Fri</p>
    </div>
    <div *ngIf="days.saturday == true">
        <p class="circle ml-2">Sat</p>
    </div>
</div>
<div *ngIf="isEveryDay()">
    <p class="circle ml-2">Everyday</p>
</div>

Demo

【讨论】：

【解决方案6】：

component.html

<div *ngFor="let day of days">
         <div *ngIf="day == 'sunday'">
          <p class="circle ml-3">Sun</p>
        </div>
        <div *ngIf="day == 'monday'">
          <p class="circle ml-2">Mon</p>
        </div>
        <div *ngIf="day == 'tuesday'">
          <p class="circle ml-2">Tue</p>
        </div>
        <div *ngIf="day == 'wednesday'">
          <p class="circle ml-2">Wed</p>
        </div>
        <div *ngIf="day == 'thursday'">
          <p class="circle ml-2">Thu</p>
        </div>
        <div *ngIf="day == 'friday'">
          <p class="circle ml-2">Fri</p>
        </div>
        <div *ngIf="day == 'saturday'">
          <p class="circle ml-2">Sat</p>
</div>
 </div>

 <div *ngIf="alldays == true">
    <p class=" circle ml-2 ">Everyday</p>
</div>

component.ts:

  alldays = true;
   days: any = ['sunday', 'monday', 'tuesday ', 'wednesday', 'thursday', 'friday', 'saturday' ];

根据你的 alldays 标志，你可以隐藏和显示你想要的

【讨论】：