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

【问题标题】：How to show div as per object value status in Angular 5?如何根据Angular 5中的对象值状态显示div？
【发布时间】：2018-09-06 03:15:01
【问题描述】：

我有一个对象，它根据我想要显示/隐藏 div 的对象状态更新了一些条件。

条件：第一次从 obj.key 获取 true 时会显示 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>

【问题讨论】：

使用*ngIf="a" 或示例

标签： angular angular5

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

或者你可以像这样使用它：

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

【讨论】：