Как показать div согласно статусу значения объекта в Angular 5?

Question

У меня есть объект, который обновляется с некоторыми условиями в соответствии с состоянием этого объекта, я хочу показать / скрыть div.

Условие: Div будет отображаться, когда в первый раз получится true от obj.key

Например

obj: any = {
  a: false,
  b: false,
  c: true
};      
<div class="hide">a</div> 
<div class="hide">b</div>
<div class="show">c</div> 

Пример 2

 obj: any = {
  a: false,
  b: true,
  c: true
 };

<div class="hide">a</div> 
<div class="show">b</div>
<div class="hide">c</div>

Answer 1

Как насчет этого:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  obj: any = {
    a: false,
    b: true,
    c: true
  };

  values = [];

  ngOnInit() {
    let alreadyAchieved = false;
    for(let key in this.obj) {
      if(this.obj[key] && !alreadyAchieved) {
        alreadyAchieved = true;
        let value = { key: key, value: this.obj[key] };
        this.values.push(value);
      } else {
        let value = { key: key, value: false };
        this.values.push(false);
      }
    }
  }

}

И в шаблоне:

<div *ngFor="let val of values">
  <div *ngIf="val.value">
    {{ val.key }}
  </div>
</div>

Таким образом, вы сможете расширить его до более чем трех ключей в объекте.

Вот Образец StackBlitz

Answer 2

да, dince2 прав! если вы хотите проверить логические значения, вы можете использовать его так:

 obj: any = {
  a: false,
  b: true,
  c: true
 };

<div *ngIf = "obj.a">a</div>

или вы можете использовать его так:

<div [ngClass] = "[obj.a ? 'show' : 'hide']">a</div>

Answer 3

Если вы хотите показать html с определенными классами скрытия / показа, определенными в css, то это должно работать,

obj: any = {
  a: false,
  b: true,
  c: true
 };
<div [ngClass]="[obj.a ? 'show' : 'hide']">a</div>
<div [ngClass]="[obj.b ? 'show' : 'hide']">b</div>
<div [ngClass]="[obj.c ? 'show' : 'hide']">c</div>