如何根据 Angular 5 中的对象值状态显示 div？

Question

我有一个对象，它根据我想要的对象状态在某些条件下更新show/hide div。

条件：Div 第一次从 obj.key

得到 true 时显示

例如

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

如果您想显示 html 以及 css 中定义的特定 hide/show 类，那么这应该可行，

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>

Answer 2

这个怎么样：

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>

这样，您就可以将它扩展到对象中的三个以上的键。

这是一个Sample StackBlitz

Answer 3

是的，dince2 是对的！如果你想检查布尔值，你可以这样使用它：

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

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

或者你可以这样使用它：

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

如何根据 Angular 5 中的对象值状态显示 div？

How to show div as per object value status in Angular 5?

angular

angular5