Question

我有一个对象，该对象根据要显示/隐藏div的对象状态以某些条件进行了更新。

条件：首次从obj.key中获取真值时将显示Div

例如

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>

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

这里是Sample StackBlitz

Answer 2

如果您要显示具有CSS中定义的特定隐藏/显示类的html，则应该可以使用

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

3 个答案: