使用 If/Else 模板

Question

我正在尝试根据* 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>

从上述条件开始，如果所有条件都正确，我将尝试每天打印，但我要打印每天坐在外面的太阳

Answer 1

使用 If/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，因为它是布尔值

Answer 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>
...

Answer 3

* ngIf不会自动带有“ else”。因此，如果每个条件的计算结果都为true，则它将进入每个分支。

如果您不希望这样做，则需要重写条件。

* ngIf和Angular的行为并不特殊。

Answer 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>

Answer 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

Answer 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' ];

根据您的全天候旗帜，您可以隐藏并显示您想要的

与ngIf绑定

6 个答案:

使用 If/Else 模板

注意